Slider
An input where the user selects a value from within a given range, ideal for adjusting settings or preferences, providing a precise and user-friendly way to control variables such as volume, brightness, or other adjustable options.
Configurable Props
<Slider>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
defaultValue | string | The value of the select when initially rendered. Use when you do not need to control the state of the select. | |
value | string | The controlled value of the select. Should be used in conjunction with onValueChange. | |
onValueChange | function (value: string) => void | Event handler called when the value changes. | |
onValueCommit | function onValueCommit?(value: number[]): void | Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service. | |
name | string | The name of the slider. Submitted with its owning form as part of a name/value pair. | |
disabled | boolean | false | When true, prevents the user from interacting with the slider. |
inverted | boolean | false | Whether the slider is visually inverted. |
min | number | 0 | The minimum value for the range. |
max | number | 100 | The maximum value for the range. |
step | number | 1 | The stepping interval. |