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