Welcome UI - Customizable design system with react

Slider

The Slider component is an interactive UI element that allows users to select a value from a continuous range. It typically consists of a track, thumb (or handle), and optional labels for indicating minimum and maximum values. Sliders are used for settings, adjustments, and filtering where users need to choose from a range of values. They enhance user experience by providing a visual and intuitive way to adjust parameters or make selections.

Slider

borderSelectorColor

string | undefined = light-900

disabled

Boolean

hint

string

label

string

max

Required

number

min

Required

number

onChange

Required

(value: number) => void

step

number | undefined = 1

type

"inline" | "left-field" | "right-field"

value

Required

number

values

number[]

Slider.Range

borderSelectorColor

string | undefined = light-900

disabled

Boolean

hint

string

label

string

max

Required

number

min

Required

number

onChange

Required

(value: Range) => void

step

number | undefined = 1

type

"inline" | "fields"

value

Required

Range

values

number[]