Range Slider

A range slider is an input field that we can use to select a numeric value within a given range (minimum and maximum values).

Examples

                     
    <div class="range-slider m-16">
    <input
      type="range"
      class="range"
      min="0"
      max="100"
      step="0.1"
      value="0"
    />

    <div class="track bg-grey-200">
      <div class="track-inner bg-cyan-500"></div>
    </div>

    <div class="thumb thumb-circle bg-grey-400"></div>
  </div>
                     
                  

                    
    const range = document.querySelector(".range");
    const thumb = document.querySelector(".thumb");
    const track = document.querySelector(".track-inner");
                  
    const updateSlider = (value) => {
  thumb.style.left = `${value}%`;
  thumb.style.transform = `translate(-${value}%, -50%)`;
  track.style.width = `${value}%`;
    };
                  
    range.oninput = (e) => updateSlider(e.target.value);
                  
    updateSlider(50);