Skip to main content
Figuration v4.4 is now available!
CAST Figuration®
Widgets

Bring interactivity to your site with a selection of jQuery widgets (plugins) all built with accessibility and usability in mind.

Slider slider.js

Slider is a robust replacement for the HTML5 element <input type="range"> with the addition of being able to be used for ranged/multi-thumb input.

Widget Dependencies

Slider requires the following:

Page Contents

Examples

Single Slider 

<span data-cfw="slider" data-cfw-slider-min="0" data-cfw-slider-max="100">
  <label>Value <input type="text" value="50" /></label>
</span>

Ranged Slider

When using a ranged slider, the thumbs/handles are constrained by the value of the other thumb/handle per the WAI-ARIA 1.0 specifications for multi-thumb sliders.

<span data-cfw="slider" data-cfw-slider-min="-50" data-cfw-slider-max="50" data-cfw-slider-step="5">
  <label>Min <input type="text" value="-25" /></label>
  <label><input type="text" value="25" /> Max</label>
</span>

Vertical Slider

This vertical slider has also been reversed so that larger values are at the top.

<span data-cfw="slider" data-cfw-slider-min="0" data-cfw-slider-max="5" data-cfw-slider-vertical="true" data-cfw-slider-reversed="true">
  <label for="slider1">Rating</label>
  <select id="slider1">
    <option value="0">0</option>
    <option value="1" selected>1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
</span>

Double Select Slider 

<span id="slider2">
  <label for="slider2_0">Start</label>
  <select id="slider2_0">
    <option value="12:00 am">12:00 am</option>
    <option value="1:00 am">1:00 am</option>
    <option value="2:00 am">2:00 am</option>
    <option value="3:00 am">3:00 am</option>
    <option value="4:00 am">4:00 am</option>
    <option value="5:00 am" selected>5:00 am</option>
    <option value="6:00 am">6:00 am</option>
    <option value="7:00 am">7:00 am</option>
    <option value="8:00 am">8:00 am</option>
    <option value="9:00 am">9:00 am</option>
    <option value="10:00 am">10:00 am</option>
    <option value="11:00 am">11:00 am</option>
    <option value="12:00 pm">12:00 pm</option>
    <option value="1:00 pm">1:00 pm</option>
    <option value="2:00 pm">2:00 pm</option>
    <option value="3:00 pm">3:00 pm</option>
    <option value="4:00 pm">4:00 pm</option>
    <option value="5:00 pm">5:00 pm</option>
    <option value="6:00 pm">6:00 pm</option>
    <option value="7:00 pm">7:00 pm</option>
    <option value="8:00 pm">8:00 pm</option>
    <option value="9:00 pm">9:00 pm</option>
    <option value="10:00 pm">10:00 pm</option>
    <option value="11:00 pm">11:00 pm</option>
    <option value="12:00 am">12:00 am</option>
  </select>
  <select id="slider2_1">
    <option value="12:00 am">12:00 am</option>
    <option value="1:00 am">1:00 am</option>
    <option value="2:00 am">2:00 am</option>
    <option value="3:00 am">3:00 am</option>
    <option value="4:00 am">4:00 am</option>
    <option value="5:00 am">5:00 am</option>
    <option value="6:00 am">6:00 am</option>
    <option value="7:00 am">7:00 am</option>
    <option value="8:00 am">8:00 am</option>
    <option value="9:00 am">9:00 am</option>
    <option value="10:00 am">10:00 am</option>
    <option value="11:00 am">11:00 am</option>
    <option value="12:00 pm" selected>12:00 pm</option>
    <option value="1:00 pm">1:00 pm</option>
    <option value="2:00 pm">2:00 pm</option>
    <option value="3:00 pm">3:00 pm</option>
    <option value="4:00 pm">4:00 pm</option>
    <option value="5:00 pm">5:00 pm</option>
    <option value="6:00 pm">6:00 pm</option>
    <option value="7:00 pm">7:00 pm</option>
    <option value="8:00 pm">8:00 pm</option>
    <option value="9:00 pm">9:00 pm</option>
    <option value="10:00 pm">10:00 pm</option>
    <option value="11:00 pm">11:00 pm</option>
    <option value="12:00 am">12:00 am</option>
  </select>
  <label id="slider2_1_Label" for="slider2_1">End</label>
</span>
<script type="text/javascript">
$('#slider2').CFW_Slider({
  min : 0,
  max : 24
});
</script>

Usage

The slider will determine the number of thumbs based on the nunber on inputs found within the specified container, up to a maximum of two thumbs.

If more than two inputs are found, the slider will use the first input found for the first thumb, and the last input found for the second thumb.

If the need to read the values as determined by the slider, the data variable on the container can be accessed as follows.

Note: If using <select> elements, the value is the internal tracking value, not the actual value of the input. In this case, the value should match the index of the selected item.

$('mySlider').data('cfw.slider')['val0']; // First thumb value
$('mySlider').data('cfw.slider')['val1']; // Second thumb value

Via Data Attributes

The basic slider will need to have a container with an <input> element within it. On the container specify the data-cfw="slider" attribute, and at minimum the attributes of data-cfw-slider-min and data-cfw-slider-max with integer values.

Via JavaScript

Call the widget manually with options:

$('#mySlider').CFW_Slider({
  min : 0,
  max : 24
});

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-cfw-slider, as in data-cfw-slider-step=5.

Name Type Default Description
min integer | float null Numerical value for the minimum values in the range
max integer | float null Numerical value for the maximum values in the range.
step integer | float 1 The minimum movement size. This value must be a positive, non-zero value.
chunk integer | float null

The 'large step' size used for PgUp/PgDown keyboard navigation.

If not defined, the chunk will be auto determined based on the size of the step and the range.
vertical boolean false The orientation of the slider in a horizontal (default), or vertical layout.
reversed boolean false If the selection, thumbs, and movement should all be revsersed.
enabled boolean true If the slider is enabled or disabled at creation.

Methods

.CFW_Slider(options)

Activates the content as a slider element. Accepts an optional options object.

$('#mySlider').CFW_Slider({
  min: 0,
  max: 100
});

.CFW_Slider('enable')

Enable the slider.

.CFW_Slider('disable')

Disable the slider.

.CFW_Slider('dispose')

Detach the listen events and data for the slider, and remove the slider controls from the DOM.

Events

Event callbacks happen on the created slider element.

Event Type Description
init.cfw.slider This event fires after the slider item is initialized.
slid.cfw.slider This event is fired when a thumb item is manually moved.
changed.cfw.slider This event is fired when one of the associated input values has been changed. 
$('#mySlider').on('slid.cfw.slider', function () {
  // do something...
});
Top of Page