D3.js Range Slider In Pure JavaScript – d3RangeSlider

d3RangeSlider is a lightweight JavaScript range slider plugin which allows to pick a range of numeric values via drag and drop.

Depending on the latest D3.js library. The jQuery version is available here.

How to use it:

Load the latest version of the d3.js library in the html file.

<script src="https://d3js.org/d3.v3.min.js"></script>

Download and load the d3RangeSlider’s files after d3.js.

<!-- Range slider code -->
<script src="d3RangeSlider.js"></script>
<!-- Range slider style -->
<link href="d3RangeSlider.css" rel="stylesheet">

Create a container to hold the range slider.

<div id="slider-container"></div>

Create a new range slider and define the min/max values.

var slider = createD3RangeSlider(0, 100, "#slider-container");

Set the range to new values.

slider.range(1,10);

Event listener.

slider.onChange(function(newRange){
   console.log(newRange);
});

Changelog:

04/15/2019

• Exposed method updateUIFromRange for eventless resizes; added onTouchEnd callback option