Murasaki
Components

Slider

Lets the user select one or more numeric values within a range.

Usage

import { Slider } from '@murasakijs/ui'

<Slider aria-label="Volume" defaultValue={[40]} max={100} step={1} />

Slider accepts the React Aria slider props through Murasaki's array-value compatibility API, including value, defaultValue, min, max, step, orientation, and onValueChange. One thumb is rendered for each value. Always provide an accessible name with a visible label or aria-label; use minStepsBetweenThumbs for range controls that need a minimum gap.

Exports

Slider.

Improve this page on GitHub

On this page