📂Programing

Example of Implementing a Double Slider with CSS

Showcase

If you drag the two points on the slider above, the two input fields update in real time; conversely, entering values in the input fields updates the slider positions. This interaction provides an intuitive interface for users and is useful for tasks such as range selection.

The concept of a double slider is implemented by stacking two native HTML <input type="range"> elements; the actual value-updating behavior is handled via JavaScript event listeners. In other words, the double slider itself does not inherently require JavaScript — it’s the interactive synchronization that does. There are additional embellishments one might add (for example, shading the interval between ranges or preventing the two values from crossing), but those are auxiliary to the basic functionality demonstrated in this showcase.

Code

CSS

<style>
    input[type="range"] {
        position: absolute;
        width: 100%;
        pointer-events: auto;
    }
    
    input[type="range"]::-webkit-slider-thumb {
        position: relative;
        cursor: grab;
        z-index: 1;
    }

    .slider-track {
        position: relative;
    }
    input[type="range"]::-webkit-slider-runnable-track {
        background: lightgray;
    }
</style>

• input[type="range"] {position: absolute;}: an essential style to place multiple sliders at the same spatial location. By specifying absolute positioning, the two sliders overlap at the same coordinates.
• input[type="range"]::-webkit-slider-thumb: used to style the handle (thumb) portion of the slider.
• background: lightgray;: without a -webkit-slider-runnable-track, the sliders still overlap but act independently and are difficult to interpret as a double slider. Specifying a background color allows the track to be visually suppressed so that only the handles are prominent.

HTML

<input type="text" id="v1-text" value="20">
<input type="text" id="v2-text" value="80">
<div class="slider-track" id="slider">
    <input type="range" id="v1-slider" min="0" max="100" value="20" step="1">
    <input type="range" id="v2-slider" min="0" max="100" value="80" step="1">
</div>
<br><br>

• <input type="text">: displays the two slider values while providing input fields for the user to type values directly.
• <div class="slider-track" id="slider">: a container that wraps the multiple sliders.
• <input type="range">: the HTML element that represents the actual slider.

javascript

<script>
    const v1Slider = document.getElementById('v1-slider');
    const v2Slider = document.getElementById('v2-slider');
    const v1Text = document.getElementById('v1-text');
    const v2Text = document.getElementById('v2-text');
    
    function updateRange() {
        v1Text.value = parseInt(v1Slider.value);
        v2Text.value = parseInt(v2Slider.value);
    }

    function updateSlider() {
        v1Slider.value = parseInt(v1Text.value);
        v2Slider.value = parseInt(v2Text.value);
    }

    v1Slider.addEventListener('input', updateRange);
    v2Slider.addEventListener('input', updateRange);
    v1Text.addEventListener('input', updateSlider);
    v2Text.addEventListener('input', updateSlider);
    
    updateRange();
</script>

• update*(): functions that synchronize the slider and input values. When a slider value changes, the input fields are updated; when an input field changes, the slider positions are updated.
• addEventListener: since the exact events to handle can vary, event listeners are attached to cover all relevant cases for updating the ranges and sliders.