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 the data-slider div and as the value of the data-slider attribute.

Horizontal

By default, the range slider displays horizontally.

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

Vertical

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

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

With Label

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

<div class="row">
  <div class="small-10 medium-11 columns">
    <div class="range-slider" data-slider data-options="display_selector: #sliderOutput3;">
      <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>

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.

<div class="row">
  <div class="small-10 columns">
    <div class="range-slider" data-slider data-options="display_selector: #days-off-count; initial: 28;">
      <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>

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.

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

Fixed Steps

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

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

Custom Range

You can create a range slider with custom range by setting the start and end variables in the data-options attribute.

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

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

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

<label id="sliderLabel">Age</label>
<div class="range-slider" data-slider>
  <span class="range-slider-handle" role="slider" tabindex="0" aria-labelledby="sliderLabel"></span>
  <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.

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