Components•Slider
Components•Slider
Slider
A range control for tuning numeric values with immediate visual feedback.
Dependencies
Copy below cli
npx shadcn add @bjork-ui/primitive-sliderHow to use
import { BjorkSlider } from "@/components/isaiahbjork/primitives";Props
classNamestringPass through styling hooks for the Slider primitive without replacing the base Bjork surface.
childrenReactNodeComposable content, labels, icons, and nested content where the primitive supports them.
valuenumberSet the current range value along with min, max, step, and onValueChange.
64%
Option strength
Use for compact numeric tuning where the orange fill and pill thumb should match the demo controls.
<BjorkSlider aria-label="Option strength" min={0} max={100} value={value} displayValue={`${value}%`} onValueChange={setValue}/>Bare slider
Use without the value rail when the surrounding UI already shows the current value.
<BjorkSlider aria-label="Playback position" defaultValue={38}/>72%
Disabled slider
Use disabled to preserve the measured control footprint while making the setting unavailable.
<BjorkSlider aria-label="Locked intensity" value={72} displayValue="72%" disabled/>