Author: | RasmusFonseca |
---|---|
Views Total: | 4,131 views |
Official Page: | Go to website |
Last Update: | April 15, 2019 |
License: | MIT |
Preview:

Description:
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
Thank you so much admin