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<input type="hidden"> elements inside thedata-slider div and as the value of thedata-slider attribute.

Horizontal

By default, the range slider displays horizontally.

<divclass="range-slider"data-slider><spanclass="range-slider-handle"role="slider"tabindex="0"></span><spanclass="range-slider-active-segment"></span><inputtype="hidden"></div>

Vertical

Adding thevertical-range class to the outer<div> and passing the data-optionvertical: true; displays the slider vertically instead of horizontally.

<divclass="range-slider vertical-range"data-sliderdata-options="vertical: true;"><spanclass="range-slider-handle"role="slider"tabindex="0"></span><spanclass="range-slider-active-segment"></span><inputtype="hidden"></div>

With Label

You can use thedisplay_selector data option to pass in an element (or input) to display the slider value in.

<divclass="row"><divclass="small-10 medium-11 columns"><divclass="range-slider"data-sliderdata-options="display_selector: #sliderOutput3;"><spanclass="range-slider-handle"role="slider"tabindex="0"></span><spanclass="range-slider-active-segment"></span></div></div><divclass="small-2 medium-1 columns"><spanid="sliderOutput3"></span></div></div>

With Input

If you use thedisplay_selector data option to pass in an input, your users can use the input and their changes will be reflected on the slider.

<divclass="row"><divclass="small-10 columns"><divclass="range-slider"data-sliderdata-options="display_selector: #days-off-count; initial: 28;"><spanclass="range-slider-handle"role="slider"tabindex="0"></span><spanclass="range-slider-active-segment"></span></div></div><divclass="small-2 columns"><inputtype="number"id="days-off-count"value="28" /></div></div>

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 theradius class to therange-slider element, or fully round it by adding theround class. Adding thedisabled class or attribute to the slider will disable it completely.

<divclass="range-slider radius"data-slider><spanclass="range-slider-handle"role="slider"tabindex="0"></span><spanclass="range-slider-active-segment"></span><inputtype="hidden"></div><divclass="range-slider round"data-slider><spanclass="range-slider-handle"role="slider"tabindex="0"></span><spanclass="range-slider-active-segment"></span><inputtype="hidden"></div><divclass="range-slider disabled"data-sliderdisabled><spanclass="range-slider-handle"role="slider"tabindex="0"></span><spanclass="range-slider-active-segment"></span><inputtype="hidden"></div>

Fixed Steps

You can create a range slider with fixed steps by setting thesteps variable in thedata-options attribute.

<divclass="range-slider"data-sliderdata-options="step: 20;"><spanclass="range-slider-handle"role="slider"tabindex="0"></span><spanclass="range-slider-active-segment"></span><inputtype="hidden"></div>

Custom Range

You can create a range slider with custom range by setting thestart andend variables in thedata-options attribute.

<divclass="range-slider"data-sliderdata-options="start: 1; end: 10;"><spanclass="range-slider-handle"role="slider"tabindex="0"></span><spanclass="range-slider-active-segment"></span><inputtype="hidden"></div>

Callbacks

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

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

$('[data-slider]').on('change.fndtn.slider',function(){// do something when the value changes});

Getting and Setting Values

To get the value of a slider, get the vale of itsdata-slider attribute.

Get Value

$('#slider').attr('data-slider');

To set a slider's value, call thefoundation function on the slider and pass in'slider','set_value' and the new slider value as arguments.

Set Value

var new_value =3;$('.range-slider').foundation('slider','set_value', new_value);

Using the Javascript

Before you can use Slider you'll want to verify that jQuery andfoundation.js are available on your page. You can refer to theJavascript documentation on setting that up.

Just addfoundation.slider.js AFTER thefoundation.js file. Your markup should look something like this:

<body>  ...<scriptsrc="js/vendor/jquery.js"></script><scriptsrc="js/foundation/foundation.js"></script><scriptsrc="js/foundation/foundation.slider.js"></script><!-- Other JS plugins can be included here --><script>    $(document).foundation();</script></body>

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 attributerole="slider", to inform assistive devices about the functionality of the element. You also need the attributetabindex="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 attributearia-labelledby, using the ID of the label as the value. Our JavaScript handles the rest of the ARIA attributes.

<labelid="sliderLabel">Age</label><divclass="range-slider"data-slider><spanclass="range-slider-handle"role="slider"tabindex="0"aria-labelledby="sliderLabel"></span><spanclass="range-slider-active-segment"></span><inputtype="hidden"></div>

If a slider doesn't have a text label, we recommend adding the attributearia-label to the slider handle with an appropriate label.

<spanclass="range-slider-handle"role="slider"tabindex="0"aria-label="Age"></span>

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:

$(document).foundation();

Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them.

$(document).foundation('slider','reflow');

Customize with Sass

Sliders can be easily customized using our provided Sass variables.

$include-html-range-slider-classes: $include-html-classes;// These variables define the slider bar styles$range-slider-bar-width:100%;$range-slider-bar-height: rem-calc(16);$range-slider-bar-border-width:1px;$range-slider-bar-border-style: solid;$range-slider-bar-border-color: $gainsboro;$range-slider-radius: $global-radius;$range-slider-round: $global-rounded;$range-slider-bar-bg-color: $ghost;$range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness: -1%);// Vertical bar styles$range-slider-vertical-bar-width: rem-calc(16);$range-slider-vertical-bar-height: rem-calc(200);// These variables define the slider handle styles$range-slider-handle-width: rem-calc(32);$range-slider-handle-height: rem-calc(22);$range-slider-handle-position-top: rem-calc(-5);$range-slider-handle-bg-color: $primary-color;$range-slider-handle-border-width:1px;$range-slider-handle-border-style: solid;$range-slider-handle-border-color: none;$range-slider-handle-radius: $global-radius;$range-slider-handle-round: $global-rounded;$range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%);$range-slider-handle-cursor: pointer;$range-slider-disabled-opacity:0.7;

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

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