Slider

Use the Slider Component to allow the user to select a single value or specify a range of values by choosing values for both its ends. The Slider is visually identical to the Ignite UI for Angular Slider Component

Slider Demo

Type

The Slider allows the user to choose from two types - continuous and discrete.

Thumbs

The Slider offers a variant with one thumb for selecting a single value and with two thumbs for specifying a range.

State

The Slider supports Enabled and Disabled states, reflecting the possibility to change the value(s). In Figma, you can switch between the two using the Disabled boolean property in the properties panel on the right. In Sketch, we have different symbols for the different states. In Adobe XD, we are using the Component States paradigm to let you easily switch between states.

Styling

The Slider comes with styling flexibility through the options available for the label background, thumb, track, and base track colors.

Usage

The Slider track color should always have a higher emphasis than the track base color and both single value and range Sliders should be consistently styled.

Do	Don't

Our community is active and always welcoming to new ideas.