3/9/2017 Range Sliders | Foundation Docs

Foundation 6 is here!
(http://zurb.com/article/1416/foundation-6-is-here)

Foundation (http://foundation.zurb.com/)
Foundation

Foundation Documentation

Search Docs: e.g. forms

Download Foundation (http://foundation.zurb.com/sites/download.html)

SETUP

Getting Started (../index.html)

CSS (../css.html)

Sass (../sass.html)

Sass Files (../sass-files.html)

Using Sass (../using-sass.html)

Applications (../applications.html)

JavaScript (../javascript.html)

Global Styles (global.html)

Kitchen Sink (kitchen_sink.html)

Accessibility (../accessibility.html)

Upgrading (../upgrading.html)

STRUCTURE

Media Queries (../media-queries.html)

Visibility (visibility.html)

Grid (grid.html)

Block Grid (block_grid.html)

Interchange Responsive Content JS (interchange.html)

Utility Classes (../utility-classes.html)

Javascript Utilities (../javascript-utilities.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)

Top Bar JS (topbar.html)

Icon Bar (icon-bar.html)

Side Nav (sidenav.html)

Magellan Sticky Nav JS (magellan.html)

Sub Nav (subnav.html)

Breadcrumbs (breadcrumbs.html)

Pagination (pagination.html)

MEDIA

Orbit Slider JS (orbit.html)

Thumbnails (thumbnails.html)

Clearing Lightbox JS (clearing.html)

Flex Video (flex_video.html)

FORMS

Forms (forms.html)

Switches (switch.html)

Range Sliders JS (range_slider.html)

Abide Validation JS (abide.html)

BUTTONS

Buttons (buttons.html)

Button Groups (button_groups.html)

Split Buttons JS (split_buttons.html)

Dropdown Buttons JS (dropdown_buttons.html)

TYPOGRAPHY

Type (typography.html)

Inline Lists (inline_lists.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)

CALLOUTS & PROMPTS

Reveal Modal JS (reveal.html)

Alerts JS (alert_boxes.html)

Panels (panels.html)

Tooltips JS (tooltips.html)

Joyride JS (joyride.html)

CONTENT

Dropdowns JS (dropdown.html)

Pricing Tables (pricing_tables.html)

Progress Bars (progress_bars.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

<div class="range-slider" data-slider>

<span class="range-slider-handle" role="slider" tabindex="0"></span>
<span class="range-slider-active-segment"></span>
<input type="hidden">
</div>

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

<div class="range-slider vertical-range" data-slider data-options="vertical: true;"

<span class="range-slider-handle" role="slider" tabindex="0"></span>
<span class="range-slider-active-segment"></span>
<input type="hidden">
</div>

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

<div class="range-slider radius" data-slider>

<span class="range-slider-handle" role="slider" tabindex="0"></span>
<span class="range-slider-active-segment"></span>
<input type="hidden">
</div>

<div class="range-slider round" data-slider>

<span class="range-slider-handle" role="slider" tabindex="0"></span>
<span class="range-slider-active-segment"></span>
<input type="hidden">
</div>

<div class="range-slider disabled" data-slider disabled>

<span class="range-slider-handle" role="slider" tabindex="0"></span>
<span class="range-slider-active-segment"></span>
<input type="hidden">
</div>

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

<div class="range-slider" data-slider data-options="step: 20;">

<span class="range-slider-handle" role="slider" tabindex="0"></span>
<span class="range-slider-active-segment"></span>
<input type="hidden">
</div>

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

<div class="range-slider" data-slider data-options="start: 1; end: 10;">

<span class="range-slider-handle" role="slider" tabindex="0"></span>
<span class="range-slider-active-segment"></span>
<input type="hidden">
</div>

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
});

Getting and Setting Values

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

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);

Using the Javascript

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>

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.

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.

<span class="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.

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;

// 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: -

// 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";

http://foundation.zurb.com/sites/docs/v/5.5.3/components/range_slider.html 12/14
3/9/2017 Range Sliders | Foundation Docs

Stay on top of what’s happening in responsive design

(http://zurb.com/responsive).
Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition » (http://zurb.com/responsive/reading)

signup@example.com

Sign Up

Foundation for Sites

Foundation is a responsive front-end framework made by ZURB (http://zurb.com), a product design company in Campbell,
CA. This framework is the result of building web products & services since 1998.

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)

Business Support (http://foundation.zurb.com/business/business-support.html)

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).

Stay Connected (http://zurb.com/news)

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/)

Notable Design Apps

Prototype, iterate and collect feedback on your products.
(http://zurb.com/notable)

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)

© 1998‐2015 ZURB, Inc. All rights reserved.

http://foundation.zurb.com/sites/docs/v/5.5.3/components/range_slider.html 14/14