Range Slider

Examples

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

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

    <div class="thumb 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) // Init value