--- title: Range Slider layout: doc/layouts/default.html --- # Range Slider

This handy slider will allow you to drag a handle to select a specific value from a range.

***
***

Basic

You can create a range slider bar using minimal markup.

HTML

{{#markdown}} ```html
``` {{/markdown}}
***

Advanced

Additional classes and data options can be added to your range slider to change its appearance and function. ### Add Border Radius or Rounding You can add a border radius to the range slider by adding the `radius` class to the `range-slider` element, or fully round it by adding the `round` class.

HTML

{{#markdown}} ```html
``` {{/markdown}}

Rendered HTML



### Fixed Steps You can create a range slider with fixed steps by setting the `steps` variable in the `data-options` attribute.

HTML

{{#markdown}} ```html
``` {{/markdown}}

Rendered HTML

### Custom Range You can create a range slider with custom range by setting the `start` and `end` variables in the `data-options` attribute.

HTML

{{#markdown}} ```html
``` {{/markdown}}

Rendered HTML

### Custom Starting Point You can create a range slider with custom initial setting by adjusting the `initial` variable in the `data-options` attribute.

HTML

{{#markdown}} ```html
``` {{/markdown}}

Rendered HTML

### Callbacks There are two ways to bind to callbacks in your sliders.

Callback Function

{{#markdown}} ```js $(document).foundation({ slider: { on_change: function(){ // do something when the value changes } } }); ``` {{/markdown}}

Events

{{#markdown}} ```js $('[data-slider]').on('change', function(){ // do something when the value changes }); ``` {{/markdown}}
### Getting and Setting Values To get the value of a slider, get the vale of its `data-slider` attribute.

Get Value

{{#markdown}} ```js $('#slider').attr('data-slider'); ``` {{/markdown}} To set a slider's value, call the `foundation` function on the slider and pass in `'slider'`, `'set_value'` and the new slider value as arguments.

Set Value

{{#markdown}} ```js var new_value = 3; $('slider').foundation('slider', 'set_value', new_value); ``` {{/markdown}} *** ### Using the Javascript Before you can use Slider you'll want to verify that jQuery and `foundation.js` are available on your page. You can refer to the [Javascript documentation](../javascript.html) on setting that up. Just add `foundation.slider.js` AFTER the `foundation.js` file. Your markup should look something like this: {{#markdown}} ```html ... ``` {{/markdown}} Required Foundation Library: `foundation.slider.js` *** ## Customize With Sass Sliders can be easily customized using our provided Sass variables.

SCSS

{{> examples_slider_variables}} *** ### Sass Errors? If the default "foundation" import was commented out, then make sure you import this file:

SCSS

```scss @import "foundation/components/range-slider"; ```