Compact settings row where the label and the live value sit inside the track: magnetic tick snapping, a rubber band when you overdrag, Shift for precision, Alt-click to reset, wheel and typed input, on a native range input for full accessibility.
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/inspector-sliderNew here? Read the installation guide.
The import and the props worth knowing about, in one place.
import { InspectorSlider } from "@/components/beste/component/inspector-slider";
// Uncontrolled: the row keeps its own value and never re-renders while dragging
<InspectorSlider label="Blend" min={0} max={1} step={0.05} defaultValue={0.55} />
// Controlled, with a separate commit for expensive work
<InspectorSlider
label="Amplitude"
value={amplitude}
onValueChange={setAmplitude} // every drag frame
onValueCommit={(value) => console.log("persist", value)} // once per gesture
min={0.1}
max={3}
step={0.1}
/>
<InspectorSlider
label="Opacity"
min={0}
max={100}
step={1}
unit="%" // suffix on the default readout
editable // double-click the row (or press Enter) to type a value
defaultValue={40}
/>
<InspectorSlider
label="Radius"
icon={Circle} // optional leading lucide icon
tone="outline" // "muted" (default) | "outline" | "ghost"
size="sm" // "sm" | "default" | "lg"
min={0}
max={24}
step={2}
resetValue={8} // restored by Alt-click
ticks={[0, 8, 16, 24]} // true | false | count | explicit values
formatValue={(value) => `${value}px`}
defaultValue={8}
/>
// Snapping off, plain scrolling never hijacked, disabled state
<InspectorSlider label="Speed" snap={false} wheel={false} disabled min={0} max={2} />
// Takes part in a form through its underlying range input
<InspectorSlider label="Volume" name="volume" min={0} max={1} step={0.01} />Turn the props on the right; the snippet under them is what you would write to get what you see.
import { InspectorSlider } from "@/components/beste/component/inspector-slider";
<InspectorSlider
label="Opacity"
defaultValue={60}
unit="%"
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Arrow keys | One step. Up and Right raise it, Down and Left lower it. |
|---|---|
| Shift + Arrow | Ten steps, for crossing a long range without dragging. |
| Page Up / Page Down | A tenth of the range, never less than one step. |
| Home / End | Jump to the minimum or the maximum. |
| Enter | Turn the readout into a field and type an exact value. |
| Double-click the readout | The same, with a pointer. |
| Wheel over a focused row | One step per tick, ten with Shift. Turn it off with `wheel={false}`. |
| Shift while dragging | Fine mode: the handle follows the pointer at a fraction of the distance. |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Label rendered on the left, inside the row. |
icon | LucideIcon | — | Optional leading icon shown before the label. |
value | number | — | Controlled value. Pair it with `onValueChange`. |
defaultValue | number | — | Initial value in uncontrolled mode. Falls back to `min`. |
onValueChange | (value: number) => void | — | Fires on every drag frame, click, key press, wheel tick and typed edit. |
onValueCommit | (value: number) => void | — | Fires once when a gesture ends and the value actually changed (pointer release, key release, end of a wheel burst, typed edit). Use it for expensive work such as persisting or re-rendering a WebGL scene. |
min | number | 0 | Minimum value. |
max | number | 1 | Maximum value. |
step | number | 0.01 | Smallest increment. Also drives readout precision and keyboard steps. |
formatValue | (value: number) => string | — | Format the readout. Defaults to `value.toFixed(...)` plus `unit`. |
unit | string | — | Suffix appended to the default readout, e.g. "%", "px", "°". |
ticks | boolean | number | number[] | true | Tick marks inside the track: `true` for automatic (one per step up to 12, otherwise deciles), a count, an explicit list of values, or `false`. |
snap | boolean | true | Magnetically pull a click to the nearest tick. Dragging is never snapped — it stays continuous and only `step` quantizes it. |
editable | boolean | — | Allow an exact value to be typed in, by double-clicking the row or pressing Enter. |
wheel | boolean | true | Adjust the value with the wheel while the row has keyboard focus. |
resetValue | number | — | Value restored by Alt-click. Falls back to `defaultValue`, then `min`. |
disabled | boolean | — | Block every interaction and dim the row. |
tone | "muted" | "outline" | "ghost" | "muted" | Surface treatment: filled (default), hairline outline, or bare until hover. |
size | "sm" | "default" | "lg" | "default" | Row height preset. |
name | string | — | Name of the underlying range input, so the row can take part in a form. |
id | string | — | Id of the underlying range input, for an external `<label htmlFor>`. |
className | string | — | |
labelClassName | string | — | Classes for the label. Needed when the row sits on something other than a theme surface — a colour ramp, say — and the muted default stops being legible. Merged onto the element, so a text colour here simply wins. |
valueClassName | string | — | Classes for the value readout. Note that the readout brightens to `text-foreground` while the row is engaged, so an override that must hold during hover and drag has to restate itself: `"text-white group-data-[active=true]/inspector-slider:text-white"`. |
aria-label | string | — | Accessible name. Falls back to `label`. |
Settings row for a span rather than a value: two thumbs on the row itself, the band between them filling it, and both ends of the pair read out on the right. Ticks, tones and thumb states follow inspector-slider exactly, appearing on hover.
Settings row with a label on the left and a plain text field on the right, sharing the family's pill: the whole row is the label, so pressing anywhere puts the caret in the field.
Settings row for a bounded number: minus and plus either side of a typeable value, with hold-to-repeat, Shift for coarse steps and full keyboard stepping.
The strip that splits a settings panel into two or three questions instead of one long scroll. It is the strip and nothing else: what the tabs switch between stays in the panel's own markup, beside the state that decides it. The pill slides between equal columns, arrow keys both move and select, and a tab can carry a count of what has changed under it.