Range slider input

The range slider allows users to slide across a specified range to select a value or trigger an effect.

The range slider is typically used in situations where general values are more subjective in nature — for example, NPS Scores — and when tactility is important, such as on mobile.

It is also used when an effect occurs on screen and sliding enables the user to see the transformation happen more naturally—for example, opacity or volume changes.

Sliders may also be used to visually break up a form and keep users engaged.

This field type is inherently set, so it never has a null value.


The range-slider component can be configured vertically or horizontally.

Value guides

The range slider can display ticks or values across the slider to visually guide the user to their desired value, as well as an output field to show selected values.