Slider

Range slider input primitive built on Radix Slider supporting single or dual thumb values, track marks, and radius customization.

// Radix — @radix-ui/react-slider
import { Slider } from "@shavin/ui";

Single value

const [value, setValue] = useState([40]);

<Slider value={value} onValueChange={setValue} min={0} max={100} step={1} />

Range (two thumbs)

20 – 70

const [range, setRange] = useState([20, 70]);

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

Radius — explicit overrides vs theme

rounded (radius="full", fixed)

square (radius="none", fixed)

inherit (tracks the Radius Configurator)

{/* Explicit — fixed regardless of the Configurator */}
<Slider defaultValue={[50]} radius="full" />   {/* rounded */}
<Slider defaultValue={[50]} radius="none" />   {/* square */}
{/* Inherit — the only one that tracks the global Radius control */}
<Slider defaultValue={[50]} radius="inherit" />

Stops (marks + snapping)

const [value, setValue] = useState([40]);

{/* step snaps to each stop; marks draw the ticks */}
<Slider
  value={value}
  onValueChange={setValue}
  min={0}
  max={100}
  step={20}
  marks={[0, 20, 40, 60, 80, 100]}
/>

Props

Prop	Type	Default
marks	number[]	—
radius	"none" \| "small" \| "medium" \| "large" \| "full" \| "inherit"	"inherit"