A numeric setting in one row
The whole bar is the slider. Its fill is the value, the name sits inside on the left and the reading on the right, so a setting costs one row with no label above it. Drag anywhere on the bar, click to jump, or use the arrow keys: a native range input covers the bar, so pointer, keyboard and screen-reader behaviour are the platform’s.
Sizes
The size prop matches Button’s, so a bar and a button of one size sit level in the same rail. Default is 40px tall and compact is 32px.
Reading
Without format, the reading shows the step’s precision, so a step of 0.02 reads “0.50”. With it, the formatted string is both the visible reading and the value a screen reader announces.
Disabled
When to use it
Use the inspector slider in a dense panel of many settings, such as a tool’s side rail, usually inside an inspector section. In a form, where a label above and helper text below earn their room, use Slider instead.
// From the npm package
import { InspectorSlider } from 'rift-ds/components/InspectorSlider/InspectorSlider';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/inspector-slider.json