Slider
An input where the user selects a value from within a given range.
Installation
npm i @huin-core/react-sliderAPI Reference
Slider
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| defaultValue | — | Specifies the initial value of the component when it is first rendered, before any user interaction or dynamic updates. |
| value | number | Represents the current value or state of the component, which can be used to bind or track its data over time. |
| onValueChange | function | Event handler called when the value changes. |
| onValueCommit | function | 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 piece. |
| disabled | boolean | When set to true, disables the component, preventing user interaction or triggering of associated actions. |
| orientation | "vertical" | "horizontal" | Specifies the direction or layout of the component, determining whether it is displayed vertically or horizontally. |
| dir | "ltr" | "rtl" | The reading direction. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode. |
| inverted | boolean | When set to true, reverses the sliding direction of the slider, causing it to move in the opposite orientation. |
| min | number | Defines the minimum allowed value or limit for the component, ensuring that it does not go below a specified threshold. |
| max | number | Defines the maximum allowed value or limit for the component, ensuring that it does not exceed a specified threshold. |
| step | number | Defines the incremental value by which the component can change, typically used in range inputs or sliders to control the precision of adjustments. |
| minStepsBetweenThumbs | number | Specifies the minimum number of steps that must exist between two thumbs in a range component, preventing them from overlapping or being too close to each other |
SliderTrack
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
SliderRange
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
Keyboard Interactions
| Key | Description |
|---|---|
ArrowRight ArrowUp | Increases the value by one step. |
ArrowLeft ArrowDown | Decreases the value by one step. |
PageUp | Increases the value by a larger step. |
PageDown | Decreases the value by a larger step. |
Home | Sets the value to its minimum. |
End | Sets the value to its maximum. |