This slider is perfect for setting specific values within a range.
Create a slider by adding the class .slider and the attribute data-slider to a container element. You should also define both a starting and maximum value for the slider.
Inside the container are three elements:
.slider-handle), which the user drags..slider-fill), which resizes dynamically based on where the handle is.<input>, which is where the value of the slider is stored.<div class="slider" data-slider data-initial-start="50" data-end="200">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
<input type="hidden">
</div>
To get vertical, just add a .vertical class and data-vertical="true" the slider.
<div class="slider vertical" data-slider data-initial-start="25" data-end="200" data-vertical="true">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
<input type="hidden">
</div>
Add the class .disabled to disable interaction with the slider.
<div class="slider disabled" data-slider data-initial-start="78">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
<input type="hidden">
</div>
Two-handle sliders can be used to define a range of values, versus a single value. To make a two-handle slider, add a second handle, and a second <input>. This works with horizontal and vertical sliders.
You can add IDs to the <input>s inside the sliders to make it easier to access the values. If you don't, the plugin will add an ID to each for you.
Note that the first handle manipulates the first <input>, while the second handle manipulates the second <input>.
<div class="slider" data-slider data-initial-start="25" data-initial-end="75">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<input type="hidden">
<input type="hidden">
</div>
Data binding allows you to connect the slider to an external <input> field. With data binding set up, dragging the handle will change the value inside the text field, and editing the number in the text field will move the slider in real-time.
To set it all up, create an <input> with an ID and add aria-controls="id" to the slider handle, where id is the ID of the <input>.
<div class="small-10 columns">
<div class="slider" data-slider data-initial-start="50">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput1"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="small-2 columns">
<input type="number" id="sliderOutput1">
</div>
Or with a step size:
<div class="small-10 columns">
<div class="slider" data-slider data-initial-start="50" data-step="5">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="small-2 columns">
<input type="number" id="sliderOutput2">
</div>
In Foundation 6.2, we introduced styles for <input type="range">, the native HTML element for range sliders. It's not supported in every browser, namely IE9 and some older mobile browsers. View browser support for the range input type.
<input type="range" min="1" max="100" step="1">
If you're using the Sass version of Foundation, add this line to your main Sass file:
@include foundation-range-input;
It's possible to use both the JavaScript slider and the native slider in the same codebase, as the CSS selectors used don't overlap. Here's what's different about the native slider:
<input type="range"> and you're good.disabled as an attribute, instead of a class.