Efniv0.1

Components

Slider

Bounded numeric control. Prefer for imprecise ranges; if the value needs to be entered exactly, use an Input with type=number.

When to usefor imprecise numeric input where the operator wants to feel the value move — thresholds, filters, opacity, zoom.

Import

import { Slider } from "@ravnhq/efni/slider"

Single value

value: 42

const [value, setValue] = useState<number[]>([42]);

<Slider value={value} onValueChange={setValue} />

Range (two thumbs)

range: 25 – 75

const [range, setRange] = useState<number[]>([25, 75]);

<Slider value={range} onValueChange={setRange} min={0} max={100} />

Disabled

Accessibility

KeyAction
← / →Adjust the value by step (default 1).
PgDn / PgUpLarger step (10× step).
Home / EndJump to min / max.
TabMove focus between thumbs (range mode).
  • Value is always an array — [n] for single, [n, m] for range — even in uncontrolled mode.
  • Pair with a live text readout so the value is announced by screen readers as it changes.

Guidelines

Do
  • Show the current value near the slider — a bare track is hard to read.
  • Set min, max, step to match the real domain (percent, hours, kg).
  • Use range mode for from/to filters where operators care about span.
Don't
  • Don't use for precise numbers (IDs, prices) — use Input type=number.
  • Don't leave the value invisible during drag — the thumb tooltip or an adjacent label is required.
  • Don't nest sliders inside dense table cells — the target is too small.

Props

PropTypeDefaultDescription
valueValue—The value of the slider. For range sliders, provide an array with one value per thumb.
defaultValueValue—The uncontrolled value of the slider when it's initially rendered. To render a controlled slider, use the value prop instead.
onValueChange((value: Value extends number ? number : Value, eventDetails: SliderRoot.ChangeEventDetails) => void)—Callback function that is fired when the slider's value changed.
minnumber0The minimum allowed value of the slider. Should not be equal to max.
maxnumber100The maximum allowed value of the slider. Should not be equal to min.
stepnumber1The granularity with which the slider can step through values.
disabledbooleanfalseWhether the slider should ignore user interaction.
…propsSliderPrimitive.Root.Props—Everything Slider passes to the element it renders.