JavaScript Slider for Spotfire

Convert a Regular Input Property Control into a Slider with JavaScript in Spotfire

Transforming a regular input property control into a slider enhances the interactivity and user experience of your Spotfire analysis. With just a few lines of JavaScript, you can provide your users with a more intuitive way to explore and input data. This approach is flexible, allowing you to tailor the slider to your specific needs, and integrates seamlessly into your existing Spotfire workflows.

Introduction

In Spotfire, property controls are powerful tools for enabling interactivity and user input within your analysis. However, the default input controls are often limited in terms of customization and user experience. One common enhancement is converting a standard input property control into a dynamic slider, allowing users to adjust values intuitively. This article will guide you through the process of transforming a regular input property control into a slider using JavaScript.

Why Use a Slider?

Sliders are a more interactive and user-friendly way to input numerical values compared to traditional text boxes. They provide immediate visual feedback and are ideal for scenarios where users need to explore a range of values quickly.

Step-by-Step Guide

First, you'll need to set up your HTML structure within a text area in Spotfire. This structure will include your property controls, which will be converted into sliders.

html

<div id='slider'>
   <SpotfireControl id="input property control" /> <SpotfireControl id="label property control" />
</div>

Here, the <SpotfireControl>  elements represent the Spotfire property controls you want to convert. The id attributes should match the IDs of the controls you are targeting.

Next, you'll need to add JavaScript that converts the input property control into a slider. This script modifies the type of the input element, sets the range of values, and defines the step size.

JS

(()=>{

  const slider=document.querySelector('#slider input');
  slider.type="range";
  slider.min = 10;
  slider.max = 50;
  slider.step = 0.5;
  slider.oninput  = () => {
      slider.blur();
      slider.focus();
  }
})()
  

• The querySelector method is used to select the input element within the #slider div. 
• The type of the input is changed to "range", which converts it into a slider. 
• The min, max, and step attributes define the slider's range and precision. Feel free to change this values as you see fit.
• The oninput event listener ensures that every movement of the slider triggers an update.
• The blur() and focus() calls ensure that Spotfire recognizes the change and updates the associated property.

Once you've added the HTML and JavaScript to a text area in Spotfire, your input property control will now function as a slider. Users can drag the slider to adjust values, and Spotfire will update the associated property in real-time.

Transforming a regular input property control into a slider enhances the interactivity and user experience of your Spotfire analysis. With just a few lines of JavaScript, you can provide your users with a more intuitive way to explore and input data. This approach is flexible, allowing you to tailor the slider to your specific needs, and integrates seamlessly into your existing Spotfire workflows.

Here is an example of usage

Multiple range sliders

With some modification of the script, we can make multiple Input Property Controls behave like sliders

<pre id='slider'>
   W1 <SpotfireControl id="input control here" />  
   W2 <SpotfireControl id="input control here" />   
   W3 <SpotfireControl id="input control here" />    
   W4 <SpotfireControl id="input control here" />
   W5 <SpotfireControl id="input control here" /> 
   W6 <SpotfireControl id="input control here" />
</pre>

(()=>{
  // Select all the input elements within the #slider div
  const sliders = document.querySelectorAll('#slider input');

  sliders.forEach((slider) => {
    // Create a span element to display the slider value
    const sliderValue = document.createElement('span');
    
    // Insert the span element after the slider in the DOM
    slider.parentNode.insertBefore(sliderValue, slider.nextSibling);

    // Convert the input to a range slider
    slider.type = "range";
    slider.min = 10;
    slider.max = 50;
    slider.step = 0.5;

    // Initialize the label with the default value
    sliderValue.textContent = slider.value;

    slider.oninput = () => {
        // Update the label with the current slider value
        sliderValue.textContent = slider.value;

        // Optional: Add a tooltip that follows the slider thumb
        slider.title = slider.value;

        // Forcing update as per the original code
        slider.blur();
        slider.focus();
    };
  });
})();

Back to the JavaScript Component Hub for Spotfire