Range slider
A small widget that allows the user to select a contiguous range of whole numbers using a slider. Check out this site for a demo. The page minimal.html
constitutes a minimal working example:
<html> <head> <!-- Dependencies --> <script src="https://d3js.org/d3.v5.min.js"></script> <!-- Range slider code --> <script src="https://cdn.rawgit.com/RasmusFonseca/d3RangeSlider/master/d3RangeSlider.js"></script> <!-- Range slider style --> <link href="https://cdn.rawgit.com/RasmusFonseca/d3RangeSlider/master/d3RangeSlider.css" rel="stylesheet"> <style type="text/css"> #slider-container { position: relative; height:30px; background-color: #eeeef5; } </style> </head> <body> <div id="slider-container"></div> <script type="text/javascript"> var slider = createD3RangeSlider(0, 100, "#slider-container"); </script> </body> </html>
This creates a slider that spans the range from 0 - 100 (both inclusive) and adds it to the container-div. If you want diffent placements of the handles or background colors, the supplied CSS can easily be adapted. A couple of functions are defined on the slider
object:
slider.range()
returns the currently selected range as an {begin: number, end: number}
-object.
slider.range(s,b)
sets the range to span the interval from s
to b
(both included). If s>b
the two numbers are swapped. If s
or b
are outside the range limits specified in the call to createD3Rangeslider
a warning is printed in the console, and the values are clamped to the valid range limits.
slider.range(s)
moves the range without changing its width and so it starts at s
. If the move causes the range to go outside the range limits a warning is printed in the console and the range moved back to the limit.
slider.onChange(callback)
adds a change-listener to the slider, so any UI modification or call to range
triggers a call to callback
with a single {begin: number, end: number}
-argument that reflects the newly updated range.
This example illustrates the use of these functions
// Create slider spanning the range from 0 to 10 var slider = createD3RangeSlider(0, 10, "#slider-container"); // Range changes to 3-6 slider.range(3,6); // Listener gets added slider.onChange(function(newRange){ console.log(newRange); }); // Range changes to 7-10 // Warning is printed that you attempted to set a range (8-11) outside the limits (0-10) // "{begin: 7, end: 10}" is printed in the console because of the listener slider.range(8); // Access currently set range var curRange = slider.range(); // "7-10" is written to the current position in the document document.write(curRange.begin + "-" + curRange.end);