--- title: Range Sliders ---

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. The slider's value will be assigned to any `` elements inside the `data-slider` div and as the value of the `data-slider` attribute. ### Horizontal By default, the range slider displays horizontally.

HTML

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

Rendered HTML

### Vertical Adding the `vertical-range` class to the outer `
` and passing the data-option `vertical: true;` displays the slider vertically instead of horizontally.

HTML

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

Rendered HTML

### With Label You can use the `display_selector` data option to pass in an element (or input) to display the slider value in.

HTML

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

Rendered HTML

***

Advanced

Additional classes and data options can be added to your range slider to change its appearance and function. ### Styling Classes 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. Adding the `disabled` class or attribute to the slider will disable it completely.

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

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

Deprecation Notice

Previous versions of the slider plugin emitted an un-namespaced `change` event, however, this has been replaced by the namespaced `change.fndtn.slider` event. The un-namespaced event will be fully deprecated when Foundation 5.4 is released.

Callback Function

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

Events

{{#markdown}} ```js $('[data-slider]').on('change.fndtn.slider', 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` *** ## Accessibility Because the range slider is a non-standard form input, assistive devices need some additional information to understand what they are. On the slider handle itself, you need the attribute `role="slider"`, to inform assistive devices about the functionality of the element. You also need the attribute `tabindex="0"`, so the element can be focused when navigating using a keyboard. If the slider has a label, the label should be connected to the slider by giving the label a unique ID, and giving the slider the attribute `aria-labelledby`, using the ID of the label as the value. Our JavaScript handles the rest of the ARIA attributes. ```html
``` If a slider doesn't have a text label, we recommend adding the attribute `aria-label` to the slider handle with an appropriate label. ```html ``` *** ## Customize with Sass Sliders can be easily customized using our provided Sass variables. {{> 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"; ```