D3 range slider

Drag the bar to select a range

Embed the range slider

<div id="slider-container"></div>
<div id="range-label">0 - 10</div>

<script type="text/javascript">
    var slider = createD3RangeSlider(0, 100, "#slider-container");

    slider.onChange(function(newRange){
        d3.select("#range-label").text(newRange.begin + " - " + newRange.end);
    });

    slider.range(0,10);
</script>

Fetch the code

Technical details

• Depends on D3 (v4 - v5)
• Must be styled through CSS. Use d3RangeSlider.css as a template
• Container must have position: relative in the style
• Range can be modified from JS using for example slider.range(10,20)