Slider

A horizontal range input for values such as volume, gain or a scan radius. Drag the glowing thumb, click anywhere on the track, or use the keyboard.

import { Slider } from 'jarvis-react-ui';

Basic

label names the slider and is shown above the track; showValue adds the current value on the right. Without a visible label pass aria-label.

import { Slider } from 'jarvis-react-ui';

export default function Basic() {
    return <Slider label="Volume" defaultValue={40} showValue />;
}

Range, step and format

min, max and step define the range; the value always snaps to a step. formatValue formats the readout and the value announced by screen readers.

import { Slider } from 'jarvis-react-ui';

export default function Range() {
    return (
        <div className="flex flex-col gap-5">
            <Slider
                label="Scan radius"
                min={50}
                max={500}
                step={50}
                defaultValue={200}
                showValue
                formatValue={(v) => `${v} m`}
            />
            <Slider
                label="Gain"
                min={0}
                max={1}
                step={0.05}
                defaultValue={0.6}
                showValue
                formatValue={(v) => `${Math.round(v * 100)} %`}
                size="sm"
            />
        </div>
    );
}

Controlled

Pass value and update it in onValueChange, which fires on every move. onValueCommit fires once when a drag ends or after a key press: use it for expensive work such as saving a setting.

import { useState } from 'react';
import { Metric, Slider } from 'jarvis-react-ui';

export default function Controlled() {
    const [power, setPower] = useState(72);
    const [committed, setCommitted] = useState(72);

    return (
        <div className="flex flex-col gap-3">
            <Metric value={power} unit="%" />
            <Slider
                aria-label="Reactor output"
                value={power}
                onValueChange={setPower}
                onValueCommit={setCommitted}
            />
            <span className="text-[10px] text-text-secondary">Last committed: {committed} %</span>
            <Slider aria-label="Locked" defaultValue={30} disabled />
        </div>
    );
}

Sound

Hovering plays hover_button; a drag plays drag_start and drag_end through the nearest SfxProvider. See Sound effects.

Accessibility

The thumb has role="slider" with aria-valuemin, aria-valuemax, aria-valuenow and, with formatValue, aria-valuetext. The label names it through aria-labelledby.
Arrow keys change the value by one step, PageUp and PageDown by ten steps, Home and End jump to min and max.
disabled removes the thumb from the tab order and sets aria-disabled.

API

Prop	Type	Default	Description
`aria-label`	`string`		Accessible name when there is no visible `label`.
`className`	`string`		Additional class names for the root element.
`defaultValue`	`number`	`min`	Initial value when uncontrolled.
`disabled`	`boolean`	`false`	Disables dragging and keyboard input.
`formatValue`	`((value: number) => string)`		Formats the value for the readout and for `aria-valuetext`, e.g. `(v) => \`${v} %``.
`fullWidth`	`boolean`	`false`	Stretches the slider to the width of its container instead of 220px.
`label`	`ReactNode`		Visible label above the track; also the accessible name of the slider.
`max`	`number`	`100`	Highest value.
`min`	`number`	`0`	Lowest value.
`onValueChange`	`((value: number) => void)`		Called with every new value while the user drags or presses a key.
`onValueCommit`	`((value: number) => void)`		Called once with the final value when a drag ends or after a key press.
`showValue`	`boolean`	`false`	Shows the formatted value next to the label.
`size`	`'sm' \| 'md'`	`'md'`	Track and thumb size.
`step`	`number`	`1`	Step between values; the value snaps to it.
`value`	`number`		Controlled value. Leave undefined to use `defaultValue`.

Also accepts inherited props from HTMLAttributes (53), AriaAttributes (52), DOMAttributes (168), RefAttributes (1), Attributes (1).