Skip to content
Slider

Slider

Sliders allow users to make selections from a range of values.

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

Sliders can have icons on both ends of the bar that reflect a range of values.

Immediate effects

Changes made with sliders are immediate, allowing a user to make slider adjustments until finding their preference. They shouldn’t be paired with settings that have even minor delays in providing user feedback.

Current state

Sliders reflect the current state of the settings they control.

Simple slider

Slider label

Slider with steps

Disabled slider

Vertical slider

Customized sliders

Here is an example of customizing the component. You can learn more about this in the overrides documentation page.

Custom thumb

Image thumb

Icon thumb

Custom value reducer