Morningstar Design System v1.16.1

Variations

Single Selection

Use when soliciting a single numeric value.

With Input

Years

White Light Dark Black

<div class="mds-range-slider__group">
    <div class="mds-range-slider__input-wrapper">
        <label class="mds-form__label" for="slider_number_field_1"> Years </label>
        <input class="mds-form__input mds-range-slider__input" type="number" id="slider_number_field_1"> </div>
    <div class="mds-range-slider__wrapper">
        <div id="slider_input" class="mds-range-slider" role="slider" aria-orientation="horizontal" aria-valuemin="0.0" aria-valuemax="100.0" aria-valuenow="20.0" aria-valuetext="20">
            <!-- This markup is dynamically created by the noUiSlider JS Library -->
        </div>
    </div>
</div>

Disabled

Years

White Light Dark Black

<div class="mds-range-slider__group">
    <div class="mds-range-slider__input-wrapper">
        <label class="mds-form__label" for="slider_number_field_2"> Years </label>
        <input class="mds-form__input mds-range-slider__input" type="number" id="slider_number_field_2" disabled> </div>
    <div class="mds-range-slider__wrapper">
        <div id="slider_input_disabled" disabled class="mds-range-slider" role="slider" aria-orientation="horizontal" aria-valuemin="0.0" aria-valuemax="100.0" aria-valuenow="20.0" aria-valuetext="20">
            <!-- This markup is dynamically created by the noUiSlider JS Library -->
        </div>
    </div>
</div>

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.

With Inputs

Minimum Value

Maximum Value

White Light Dark Black

<div class="mds-range-slider__group--min-max">
    <div class="mds-range-slider__input-wrapper">
        <label class="mds-form__label" for="slider_two_number_field_min_1"> Minimum Value </label>
        <input class="mds-form__input mds-range-slider__input mds-range-slider__input--min" type="number" id="slider_two_number_field_min_1"> </div>
    <div class="mds-range-slider__wrapper">
        <div id="slider_two_with_input" class="mds-range-slider">
            <!-- This markup is dynamically created by the noUiSlider JS Library -->
        </div>
    </div>
    <div class="mds-range-slider__input-wrapper">
        <label class="mds-form__label" for="slider_two_number_field_max_1"> Maximum Value </label>
        <input class="mds-form__input mds-range-slider__input mds-range-slider__input--max" type="number" id="slider_two_number_field_max_1"> </div>
</div>

By default, Form text boxes should display the top and bottom range of slider values.

Disabled

Minimum Value

Maximum Value

White Light Dark Black

<div class="mds-range-slider__group--min-max">
    <div class="mds-range-slider__input-wrapper">
        <label class="mds-form__label" for="slider_two_number_field_min_2"> Minimum Value </label>
        <input class="mds-form__input mds-range-slider__input mds-range-slider__input--min" type="number" id="slider_two_number_field_min_2" disabled> </div>
    <div class="mds-range-slider__wrapper">
        <div id="slider_two_with_input_disabled" disabled class="mds-range-slider">
            <!-- This markup is dynamically created by the noUiSlider JS Library -->
        </div>
    </div>
    <div class="mds-range-slider__input-wrapper">
        <label class="mds-form__label" for="slider_two_number_field_max_2"> Maximum Value </label>
        <input class="mds-form__input mds-range-slider__input mds-range-slider__input--max" type="number" id="slider_two_number_field_max_2" disabled> </div>
</div>

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.
Ensure slider values can be increased and decreased using keyboard arrow keys. See Mozilla's slider accessibility documentation for recommendations.
Always include label's with slider input fields. If no labels are desired, use the .mds-screenreader-only class to visually hide the labels while preserving accessibility.

Code Reference

CSS Class References

Class	Applies to	Outcome
`.mds-range-slider__wrapper`	`<div>` and is the direct parent of `<div id="[mySliderId]">`	Handles width and positioning of the slider bar.
`.mds-range-slider__input-wrapper`	`<div>` and is the direct parent of `<div id="[myInputId]">`	Handles width and positioning of the `inputs`.
`.mds-range-slider__group`	`<div>` wrapping all sliders and `inputs`	Clearfix out of the component.
`.mds-range-slider--hidden`	`<div id="[mySliderId]">`	Hides the slider bar.
`.mds-range-slider__input`	`<input id="[myInputId]">`	Sets a `min-width` value on the `input` element to ensure it will always allow for two digits.

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:

Place a <div id="mySliderId"> element in the DOM. The noUiSlider.create() function must target the ID attribute set on an empty <div>.
Call noUiSlider.create() with your empty div ID as the first parameter and the slider options array as the second parameter.
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:

<div id="mySliderId"></div>
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.