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/>
```