Slider

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.

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.

<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 is possible with the underlying Radix Slider but is not exposed.

API reference