D3.js Slider Examples

http://github.com/turban/d3.slider

Default slider

d3.slider()

Range Slider

d3.slider().value([10, 25 ])

Range Slider with event, values: 10, 25

d3.select('#slider3').call(d3.slider().axis(true).value( [ 10, 25 ] ).on("slide", function(evt, value) {
  d3.select('#slider3textmin').text(value[ 0 ]);
  d3.select('#slider3textmax').text(value[ 1 ]);
})

Slider with slide event: 0

d3.slider().on("slide", function(evt, value) {
  d3.select('#slider3text').text(value);
})

Slider with default axis

d3.slider().axis(true)

Slider with custom axis

d3.slider().axis( d3.svg.axis().orient("top").ticks(6) )

Slider with min, max and step values

d3.slider().axis(true).min(2000).max(2100).step(5)

Vertical slider

d3.slider().value(50).orientation("vertical")

Vertical range slider

d3.slider().value([10, 45 ]).orientation("vertical")

Slider with dates

d3.slider().scale(d3.time.scale().domain([new Date(1984,1,1), new Date(2014,1,1)])).axis(d3.svg.axis())

Slider with snapping to ticks

d3.slider().scale(d3.time.scale().domain([new Date(1984,1,1), new Date(2014,1,1)])).axis( d3.svg.axis() ).snap(true).value(new Date(2000,1,1))

Slider with ordinal scales (categories)

d3.slider().scale(d3.scale.ordinal().domain(["Gecko", "Webkit", "Blink", "Trident"]).rangePoints([0, 1], 0.5)).axis( d3.svg.axis() ).snap(true).value("Gecko")