76 lines
1.6 KiB
Markdown
76 lines
1.6 KiB
Markdown
1. Home
|
|
2. Components
|
|
3. Slider
|
|
|
|
# Slider
|
|
|
|
An input where the user selects a value from within a given range.
|
|
|
|
[Docs](https://www.radix-ui.com/primitives/docs/components/slider)[API Reference](https://www.radix-ui.com/primitives/docs/components/slider#api-reference)## Props
|
|
|
|
| Prop | Type | Default | Description |
|
|
| --- | --- | --- | --- |
|
|
| showStep | boolean | false | Visualize step marks along the track |
|
|
| min | number | 0 | Minimum value |
|
|
| max | number | 100 | Maximum value |
|
|
| step | number | 1 | Step size |
|
|
| value | number[] | - | Controlled values for one or more thumbs |
|
|
| defaultValue | number[] | - | Uncontrolled initial values |
|
|
| onValueChange | (value: number[]) => void | - | Callback when value changes |
|
|
| ...Radix props | ComponentProps<typeof SliderPrimitive.Root> | - | All Radix slider props |
|
|
|
|
## Usage
|
|
|
|
```jsx
|
|
<Slider defaultValue={[50]} max={100} step={0.01}/>
|
|
```
|
|
|
|
### Create a range
|
|
|
|
```jsx
|
|
<Slider defaultValue={[25, 75]} max={100} step={1}/>
|
|
```
|
|
|
|
### Prevent thumb overlap
|
|
|
|
```jsx
|
|
<Slider defaultValue={[20, 70]} max={100} step={10} minStepsBetweenThumbs={1}/>
|
|
```
|
|
|
|
### Define step size
|
|
|
|
```jsx
|
|
<Slider defaultValue={[20]} max={100} step={10}/>
|
|
```
|
|
|
|
### Define step size and show
|
|
|
|
```jsx
|
|
<Slider defaultValue={[20]} min={2} max={100} step={10} showStep/>
|
|
```
|
|
|
|
```jsx
|
|
<Slider showStep/>
|
|
```
|
|
|
|
### Examples
|
|
|
|
```jsx
|
|
// Single value
|
|
<Slider defaultValue={[50]} min={0} max={100} step={1} />
|
|
|
|
// Range
|
|
<Slider defaultValue={[25, 75]} min={0} max={100} step={1} />
|
|
```
|
|
|
|
### Disabled
|
|
|
|
```jsx
|
|
<Slider defaultValue={[20]} max={100} step={10} disabled/>
|
|
```
|
|
|
|
### Disabled with step
|
|
|
|
```jsx
|
|
<Slider defaultValue={[20]} max={100} step={10} showStep disabled/>
|
|
``` |