d3rangeslider's Introduction

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);

d3rangeslider's People

Contributors

Stargazers

Watchers

d3rangeslider's Issues

Is it possible to set min and max value for range ?

How to show display scale or ticks below the slider?

Is there any way to display a scale or ticks below the slider like these: https://bl.ocks.org/johnwalley/e1d256b81e51da68f7feb632a53c3518

Values to SQL DB

I can't find a way to get the velues out and in a sql table after submitting.
Thanks in advance.

Creating sliders with non-zero begin

Great slider! However I have found this one issue if I modify the minimal example as so:

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

On initial assignment of slider range (e.g. slider.range(10,20);), the slider appears at the wrong location. Dragging it around or changing the range via the UI fixes things.

Recommend Projects