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