Range Sliders

Variations

Single Selection

Use when soliciting a single numeric value.

• Add the disabled attribute to a div with a unique ID, i.e., <div id="[mySliderDivId]" disabled>.
• Add the disabled attribute to all binded Form Text Boxes, i.e., <input id="[myInputId]" disabled>.

Range Selection

Use when soliciting a range between two numeric values.

• By default, Form Text Boxes should display the top and bottom range of slider values.

• Add the disabled attribute to a div with a unique ID, i.e., <div id="[mySliderDivId]" disabled>.
• Add the disabled attribute to all binded Form Text Boxes, i.e., <input id="[myInputId]" disabled>.

Guidelines

Use When

• Encouraging user exploration when setting a value or range of values, especially when that value has an immediate effect on a data visualization.

Don’t Use When

• Gathering information in a form, i.e., “Age” or “Salary”. Instead, use a Form Text Box.

Visual Language

• Always include the Form Text Box(es) when using a slider to ensure the component is controllable via keyboard.
• Position the slider’s Form Text Box(es) to meet the requirements of your product.

Behaviors

• Adjust a slider’s value(s) by clicking and dragging its handle(s), or by clicking anywhere on its bar.
• Hovering over an active slider’s handle will change the default cursor to the grab cursor; clicking will change to the grabbing cursor.
• The System's sliders are built using noUiSlider. For a full breakdown of behaviors and configurations, please refer to the official noUiSlider documentation.

Accessibility

• Always include a Form Text Box with the slider.
• Follow guidelines for Form Text Boxes.
• Include correct aria and role attributes for the sliders. When using the noUiSlider library these attributes are added automatically. See Mozilla's slider accessibility documentation for details.
• Always include min and max attributes for Form Text Boxes.
• Ensure slider values can be increased and decreased using keyboard arrow keys. See Mozilla's slider accessibility documentation for recommendations.
• Always include label elements with slider input fields. If no labels are desired, use the mds-doc-screenreader-only class to visually hide the labels while preserving accessibility.

Code Reference

CSS Class References

JavaScript Considerations

The System's range sliders depend on the noUiSlider (^10.1.0) third-party JavaScript library, offered via the MDS Node Package. If you are not using MDS through our Node package, you can download noUiSlider separately.

You can review the noUiSlider documentation to see what options are available.

The noUiSlider library enables MDS to retain its class-naming structure with the cssClasses option. MDS exposes a JavaScript bemClassOverrides object within mds/dist/assets/scripts/mds_library.js (post-compile). It is a requirement to set the cssClasses: bemClassOverrides option each time a noUiSlider.create() function is called.

To generate a range slider:

1. Place a <div id="mySliderId"> element in the DOM. The noUiSlider.create() function must target the ID attribute set on an empty <div>.
2. Call noUiSlider.create() with your empty div ID as the first parameter and the slider options array as the second parameter.
3. Set up interactive event listeners on the slider and input to bind a slider with the input as a mutual dependency.

Notes About Markup Structure

There are no layout requirements for a slider with inputs. The markup requirements are:

1. <div id="mySliderId"></div>
2. Any <input id="myInputId">s bound to the slider

The inline layouts in the slider examples are included with MDS.

A range slider will fill out 100% of the width of its container. Do not set an explicit width on the <div id="mySliderId"></div> element as it will break the rendering. Any widths to control the range slider must be set on its parent element.