Professional Documents
Culture Documents
Foundation 6 is here!
(http://zurb.com/article/1416/foundation-6-is-here)
Foundation (http://foundation.zurb.com/)
Foundation
Foundation Documentation
SETUP
CSS (../css.html)
Sass (../sass.html)
Applications (../applications.html)
JavaScript (../javascript.html)
Accessibility (../accessibility.html)
Upgrading (../upgrading.html)
STRUCTURE
Visibility (visibility.html)
Grid (grid.html)
http://foundation.zurb.com/sites/docs/v/5.5.3/components/range_slider.html 1/14
3/9/2017 Range Sliders | Foundation Docs
Right-to-Left Support (rtl.html)
NAVIGATION
Off-canvas JS (offcanvas.html)
Breadcrumbs (breadcrumbs.html)
Pagination (pagination.html)
MEDIA
Thumbnails (thumbnails.html)
FORMS
Forms (forms.html)
Switches (switch.html)
BUTTONS
Buttons (buttons.html)
TYPOGRAPHY
Type (typography.html)
Labels (labels.html)
http://foundation.zurb.com/sites/docs/v/5.5.3/components/range_slider.html 2/14
3/9/2017 Range Sliders | Foundation Docs
Keystrokes (keystrokes.html)
Alerts JS (alert_boxes.html)
Panels (panels.html)
Tooltips JS (tooltips.html)
Joyride JS (joyride.html)
CONTENT
Dropdowns JS (dropdown.html)
Tables (tables.html)
Accordion JS (accordion.html)
Tabs JS (tabs.html)
Equalizer JS (equalizer.html)
SUPPORT
Changelog (../changelog.html)
Compatibility (../compatibility.html)
OLDER DOCS
Foundation 4 (http://foundation.zurb.com/sites/docs/v/4.3.2/index.html)
Foundation 3 (http://foundation.zurb.com/sites/docs/v/3.2.5/)
Foundation 2 (http://foundation.zurb.com/sites/docs/v/2.2.1/)
Range Sliders
This handy slider will allow you to drag a handle to select a specific value from a
range.
http://foundation.zurb.com/sites/docs/v/5.5.3/components/range_slider.html 3/14
3/9/2017 Range Sliders | Foundation Docs
50
50
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 the data-slider div and as the value of the data-
slider attribute.
Horizontal
By default, the range slider displays horizontally.
HTML
RENDERED HTML
http://foundation.zurb.com/sites/docs/v/5.5.3/components/range_slider.html 4/14
3/9/2017 Range Sliders | Foundation Docs
RENDERED HTML
Vertical
Adding the vertical-range class to the outer <div> and passing the data-option vertical:
true; displays the slider vertically instead of horizontally.
HTML
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
http://foundation.zurb.com/sites/docs/v/5.5.3/components/range_slider.html 5/14
3/9/2017 Range Sliders | Foundation Docs
<div class="row">
<div class="small-10 medium-11 columns">
<div class="range-slider" data-slider data-options="display_selector: #sliderOutpu
<span class="range-slider-handle" role="slider" tabindex="0"></span>
<span class="range-slider-active-segment"></span>
</div>
</div>
<div class="small-2 medium-1 columns">
<span id="sliderOutput3"></span>
</div>
</div>
RENDERED HTML
36
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
<div class="row">
<div class="small-10 columns">
<div class="range-slider" data-slider data-options="display_selector: #days-off-co
<span class="range-slider-handle" role="slider" tabindex="0"></span>
<span class="range-slider-active-segment"></span>
</div>
</div>
<div class="small-2 columns">
<input type="number" id="days-off-count" value="28" />
</div>
</div>
RENDERED HTML
28
http://foundation.zurb.com/sites/docs/v/5.5.3/components/range_slider.html 6/14
3/9/2017 Range Sliders | Foundation Docs
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
RENDERED HTML
http://foundation.zurb.com/sites/docs/v/5.5.3/components/range_slider.html 7/14
3/9/2017 Range Sliders | Foundation Docs
Fixed Steps
You can create a range slider with fixed steps by setting the steps variable in the data-options
attribute.
HTML
RENDERED HTML
40
Custom Range
You can create a range slider with custom range by setting the start and end variables in the
data-options attribute.
HTML
RENDERED HTML
2
Callbacks
There are two ways to bind to callbacks in your sliders.
Deprecation Notice
http://foundation.zurb.com/sites/docs/v/5.5.3/components/range_slider.html 8/14
3/9/2017 Range Sliders | Foundation Docs
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
$(document).foundation({
slider: {
on_change: function(){
// do something when the value changes
}
}
});
EVENTS
$('[data-slider]').on('change.fndtn.slider', function(){
// do something when the value changes
});
GET VALUE
$('#slider').attr('data-slider');
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
var new_value = 3;
$('.range-slider').foundation('slider', 'set_value', new_value);
http://foundation.zurb.com/sites/docs/v/5.5.3/components/range_slider.html 9/14
3/9/2017 Range Sliders | Foundation Docs
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:
<body>
...
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.slider.js"></script>
<!-- Other JS plugins can be included here -->
<script>
$(document).foundation();
</script>
</body>
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.
http://foundation.zurb.com/sites/docs/v/5.5.3/components/range_slider.html 10/14
3/9/2017 Range Sliders | Foundation Docs
<label id="sliderLabel">Age</label>
<div class="range-slider" data-slider>
<span class="range-slider-handle" role="slider" tabindex="0" aria-labelledby="slider
<span class="range-slider-active-segment"></span>
<input type="hidden">
</div>
If a slider doesn't have a text label, we recommend adding the attribute aria-label to the slider
handle with an appropriate label.
$(document).foundation();
Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them.
$(document).foundation('slider', 'reflow');
http://foundation.zurb.com/sites/docs/v/5.5.3/components/range_slider.html 11/14
3/9/2017 Range Sliders | Foundation Docs
$include-html-range-slider-classes: $include-html-classes;
$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: -
$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";
http://foundation.zurb.com/sites/docs/v/5.5.3/components/range_slider.html 12/14
3/9/2017 Range Sliders | Foundation Docs
signup@example.com
Sign Up
Want more?
Foundation for Apps (http://foundation.zurb.com/apps)
Ink Responsive Emails (http://zurb.com/ink/)
Notable Design Apps (http://zurb.com/notable)
Training (http://zurb.com/university/courses)
Design Resources (http://zurb.com/library)
Talk to us
Tweet us at
@ZURBfoundation (https://twitter.com/zurbfoundation)
http://foundation.zurb.com/sites/docs/v/5.5.3/components/range_slider.html 13/14
3/9/2017 Range Sliders | Foundation Docs
Or check our support page (http://foundation.zurb.com/support/support.html)
Stay Updated
Keep up with the latest on Foundation. Find us on Github (https://github.com/zurb/foundation).
Studios
Helping more than 200 startups succeed since 1998.
(http://zurb.com/studios)
Foundation
The most advanced front-end framework in the world.
(http://foundation.zurb.com/)
University
Ideas, thoughts and design resources shared with you.
(http://zurb.com/university)
(https://www.twitter.com/ZURB
(https://www.facebook
(http://zurb.co
(http://www.zurb.com)
ABOUT (HTTP://ZURB.COM/ABOUT) BLOG (HTTP://ZURB.COM/BLOG)
NEWS & EVENTS (HTTP://ZURB.COM/NEWS) CONTACT (HTTP://ZURB.COM/CONTACT)
SITEMAP (HTTP://ZURB.COM/SITEMAP)
http://foundation.zurb.com/sites/docs/v/5.5.3/components/range_slider.html 14/14