---
title: Range Sliders
layout: component.html
---
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
### With Input
If you use the `display_selector` data option to pass in an input, your users can use the input and their changes will be reflected on the slider.
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 have been fully deprecated.
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;
$('.range-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
```
***
### Adding New Range Slider After Page Load
If you add new content after the page has been loaded, you will need to reinitialize the Foundation JavaScript by running the following:
{{#markdown}}
```javascript
$(document).foundation();
```
{{/markdown}}
Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them.
{{#markdown}}
```javascript
$(document).foundation('slider', 'reflow');
```
{{/markdown}}
***
## 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: