Foundation
Jump to Nav

# Slider

JavaScript

This handy lil slider is perfect for setting specific values within a range.

## Basics

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:

- The handle (`.slider-handle`), which the user drags.
- The fill (`.slider-fill`), which resizes dynamically based on where the handle is.
- A hidden `<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>

## Vertical

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>

## Disabled

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 Handles

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

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>

## Native Range Slider

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:

- Less markup: just write `<input type="range">` and you're good.
- No JavaScript is needed, which guarantees it runs faster in most browsers.
- To disable the slider, add `disabled` as an attribute, instead of a class.
- No support for vertical orientation.
- No support for two handles.

## Non-linear value translation

Sometimes not every value is of equal importance. In the example below, the slider focusses on the higher numbers by adding a `log`-type position value function. Alternatively there is also a `pow`-type position value function available, making the reverse possible.

    <div class="small-10 columns">
    <div class="slider" data-slider data-initial-start="50" data-step="1" data-position-value-function="log" data-non-linear-base="5">
      <span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutputNonLinear"></span>
    </div>
    </div>
    <div class="small-2 columns">
      <input type="number" id="sliderOutputNonLinear">
    </div>

The nonLinearBase-option is optional and defaults to 5.

## Reflow

The slider takes into account the width of the handles when calculating how to display itself. This means that if the slider is initially hidden, or hidden while the value is adjusted, the resulting visual will be slightly different because the width of the handle is indeterminate. If this is problematic, you can use JavaScript to cause the slider to reflow at the time that you change it from being hidden. Example:

    $('#my-slider').show();
    $('#my-slider').foundation('_reflow');

## Sass Reference

### Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

Name | Type | Default Value | Description
--- | --- | --- | ---
`$slider-width-vertical` | Number | `0.5rem` | Default slider width of a vertical slider. (Doesn't apply to the native slider.)
`$slider-transition` | Transition | `all 0.2s ease-in-out` | Transition properties to apply to the slider handle and fill. (Doesn't apply to the native slider.)

### Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

#### slider-container

    @include slider-container;

Adds the general styles for sliders.

#### slider-fill

    @include slider-fill;

Adds the general styles for active fill for sliders.

#### slider-handle

    @include slider-handle;

Adds the general styles for the slider handles.

## JavaScript Reference

### Initializing

The file `foundation.slider.js` must be included in your JavaScript to use this plugin, along with `foundation.core.js`. This plugin also requires these utility libraries:

- `foundation.util.motion.js`

- `foundation.util.triggers.js`

- `foundation.util.keyboard.js`

- `foundation.util.touch.js`

### Foundation.Slider

Creates a new instance of a slider control.

    var elem = new Foundation.Slider(element, options);

Name | Type | Description
--- | --- | ---
`element` | jQuery | jQuery object to make into a slider control.
`options` | Object | Overrides to the default plugin settings.

### Plugin Options

Use these options to customize an instance of Slider. Plugin options can be set as individual data attributes, one combined `data-options` attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

Name | Type | Default | Description
--- | --- | --- | ---
`data-start` | `number` | `0` | Minimum value for the slider scale.
`data-end` | `number` | `100` | Maximum value for the slider scale.
`data-step` | `number` | `1` | Minimum value change per change event.
`data-initial-start` | `number` | `0` | Value at which the handle/input *(left handle/first input)* should be set to on initialization.
`data-initial-end` | `number` | `100` | Value at which the right handle/second input should be set to on initialization.
`data-binding` | `boolean` | `false` | Allows the input to be located outside the container and visible. Set to by the JS
`data-click-select` | `boolean` | `true` | Allows the user to click/tap on the slider bar to select a value.
`data-vertical` | `boolean` | `false` | Set to true and use the `vertical` class to change alignment to vertical.
`data-draggable` | `boolean` | `true` | Allows the user to drag the slider handle(s) to select a value.
`data-disabled` | `boolean` | `false` | Disables the slider and prevents event listeners from being applied. Double checked by JS with `disabledClass`.
`data-double-sided` | `boolean` | `false` | Allows the use of two handles. Double checked by the JS. Changes some logic handling.
`data-decimal` | `number` | `2` | Number of decimal places the plugin should go to for floating point precision.
`data-move-time` | `number` | `200` | Time, in ms, to animate the movement of a slider handle if user clicks/taps on the bar. Needs to be manually set if updating the transition time in the Sass settings.
`data-disabled-class` | `string` | `disabled` | Class applied to disabled sliders.
`data-invert-vertical` | `boolean` | `false` | Will invert the default layout for a vertical slider.
`data-changed-delay` | `number` | `500` | Milliseconds before the `changed.zf-slider` event is triggered after value change.
`data-non-linear-base` | `number` | `5` | Basevalue for non-linear sliders
`data-position-value-function` | `string` | `linear` | Basevalue for non-linear sliders, possible values are: `'linear'`, `'pow'` & `'log'`. Pow and Log use the nonLinearBase setting.

### Events

These events will fire from any element with a Slider plugin attached.

Name | Description
--- | ---
`moved.zf.slider` | Fires when the handle is done moving.
`changed.zf.slider` | Fires when the value has not been change for a given time.

### Methods

#### destroy

    $('#element').foundation('destroy');

Destroys the slider plugin.