Skip to main content

Range slider

A range slider lets users declare a min and max value in a predetermined range. This is useful for scenarios where users want to set a very specific range of values, for instance a price range or for a precise configuration.

Example

Select a volume range
Range-slider on a default theme

Best practices

It's important to note that range slider is setting both a minimum value and a maximum value inside another range. Both the selected range and the overall range are important bits of information and should be as clear as possible when a user scans this component. Use the label to help clarify the relationship and what the selected range represents.

Do

  • Use a descriptive label to indicate what the range slider is selecting.
  • Units (such as degrees, pixels, etc.) should be mentioned in the range slider label.

Don’t

  • Don’t use for a range of 3 values or less.
  • Don’t change the size of the range slider handles from the default size.

Also known as

Dual slider

Related

Slider

Accessibility

  • Valid markup requires range-slider to be used inside a form with a submit button.
  • data-js-range-slider-minimum-label should contain meaningful text about the action performed by the minimum slider handle.
  • data-js-range-slider-maximum-label should contain meaningful text about the action performed by the maximum slider handle.

Development

  • Schema definition: The range-slider schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

default

Set a range
<fieldset class="c-range-slider">
    <legend class="c-label">Set a range</legend>
    <label class="c-label" for="minNumber">Minimum volume</label>
    <input id="minNumber" class="c-text-field" type="number" min="0" max="100" value="0" data-js-range-slider-minimum-label="Minimum range slider, use left or right arrow to set a minimum range value.">
    <label class="c-label" for="maxNumber">Maximum volume</label>
    <input id="maxNumber" class="c-text-field" type="number" min="0" max="100" value="100" data-js-range-slider-maximum-label="Maximum range slider, use left or right arrow to set a maximum range value.">
</fieldset>