Slider

Slider components provide a user interface element for selecting a numerical value from a continuous range. They offer a visual representation of the range and allow users to precisely choose a value by dragging a handle along a horizontal track. This makes them ideal for situations where fine-grained control over settings or adjustments is necessary within an application.

API Reference

Prop	Type	Default
`label`	`string`	-
`icon`	`string`	-
`step`	`number`	`1`
`min`	`number`	`0`
`max`	`number`	`100`
`required`	`boolean`	`false`
`orientation`	`OrientationTypes`	`horizontal`
`doubleSlider`	`boolean`	`false`
`withTextInput`	`boolean`	`false`
`withThumbLabel`	`boolean`	`false`
`withControls`	`boolean`	`false`
`error`	`boolean`	`false`
`errorMessage`	`string`	-
`instruction`	`string`	-

Examples

Vertical

With Text Input

With Controls

Double Slider

With Ticks

100

Usage

General Guidelines

Do's

Use a horizontal track with a handle (tick) that users can drag to indicate their selection.
Display clear labels at either end of the slider track to indicate the minimum and maximum values.
Use a consistent style and behavior for slider throughout the application. (e.g. use variant="primary").
Ensure the slider has proper keyboard controls and ARIA attributes for screen reader compatibility.

Don'ts

Don't make precise selection difficult, consider offering snap points or discrete values for situations requiring specific control.
Don't neglect keyboard accessibility, allow users to navigate and adjust the slider using keyboard arrow keys.

Writing Guidelines

When to use

Use when allowing users to select a numerical value from a continuous range.
Use when offering fine-grained control over settings or adjustments within an application.

When not to use

Don't use when dealing with a limited set of discrete options (consider radio buttons or dropdown menus).
Don't use when precise selection is not crucial and a few predefined options would suffice.

Use Case

General Use Cases

Slider are typically use for adjusting volume control in a media player, setting brightness levels on a display. Or for selecting a specific time within a video timeline.

Digital Health Use Cases

For Digital Health Applications slider can be used for setting a target blood sugar range for a diabetic user. Also for selecting a desired sleep duration within a sleep tracker app.

Accessibility Guidelines

Add aria-labelledby to use it correctly, define an ID for the element you want to use as label and set the property to that ID.
Use aria-valuenow to specifies the current value of the progress indicator. It should be a number between aria-valuemin and aria-valuemax.

Slider

Do's

Don'ts

When to use

When not to use

On this page