# Slider

A form control for choosing a value within a preset range of values.

Tabs: [Guidelines](/components/web/slider/slider.guidelines.md) · [Code](/components/web/slider/slider.code.md)

## Basic usage

`Slider` selects a single number between `min` (defaults to `0`) and `max`. It can be controlled with `value` and `onValueChange`, or uncontrolled with `defaultValue`.

```tsx
import {useState} from 'react'
import {Slider} from '@pleo-io/telescope'

const ZoomSlider = () => {
    const [zoom, setZoom] = useState(100)

    return (
        <Slider aria-label="Zoom level" min={50} max={200} value={zoom} onValueChange={setZoom} />
    )
}
```

Always pass an `aria-label`, because the slider has no visible label of its own.

## Steps

`step` sets the increment used by the pointer and the keyboard, and `isStepsVisible` renders a mark for each step along the track.

```tsx
<Slider aria-label="Zoom level" defaultValue={50} max={100} step={10} isStepsVisible />
```

The distance between `min` and `max` must be a whole number of steps, otherwise `Slider` throws an error while rendering. For example, `min={0} max={100} step={13}` is invalid, while `step={10}` and `step={25}` are valid.

## Keyboard

The thumb is focusable. `ArrowLeft` and `ArrowRight` (and `ArrowDown` and `ArrowUp`) move it by one `step`, `Home` jumps to `min` and `End` jumps to `max`.

## Limitations

`Slider` supports a single thumb. The [multiple thumbs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/) is possible with the underlying [Radix Slider](https://www.radix-ui.com/primitives/docs/components/slider) but is not exposed.

## API reference

#### `aria-label`

Type: `string | undefined`

Default: -

No description available

#### `defaultValue`

Type: `number | undefined`

Default: -

No description available

#### `focusRingVariant`

Type: `FocusRingVariant | undefined`

##### Allowed values

- `"offset"`
- `"regular"`
- `"inset"`

Default: -

No description available

#### `isStepsVisible`

Type: `boolean`

Default: -

No description available

#### `max` (required)

Type: `number`

Default: -

No description available

#### `min`

Type: `number | undefined`

Default: -

No description available

#### `onValueChange`

Type: `((value: number) => void) | undefined`

##### Allowed values

- `(value: number) => void`

Default: -

No description available

#### `step`

Type: `number | undefined`

Default: -

No description available

#### `value`

Type: `number | undefined`

Default: -

No description available