Components

Slider

Controlled single-value slider with token track, fill, thumb, and accessible value formatting.

Install

npx shadcn@latest add @alix/slider

Preview

Research budget42%

Usage

<Slider
  aria-label="Research budget"
  value={value}
  onValueChange={setValue}
  min={0}
  max={100}
  step={1}
/>

Examples

Fine-grained range

Use min, max, step, and formatValue when the slider represents a fractional threshold.

Confidence threshold35%

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

return (
  <div className="w-full max-w-sm space-y-3">
    <div className="flex items-baseline justify-between gap-6">
      <span className="text-sm font-medium text-foreground">Confidence threshold</span>
      <span className="font-mono text-sm tabular-nums text-[#1b3644]">
        {Math.round(value * 100)}%
      </span>
    </div>
    <Slider
      aria-label="Confidence threshold"
      value={value}
      onValueChange={setValue}
      min={0}
      max={1}
      step={0.05}
      formatValue={(current) => `${Math.round(current * 100)}%`}
    />
  </div>
);

Disabled weighting

A disabled slider communicates a locked value while keeping the current number visible.

Locked forecast weighting72%

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

return (
  <div className="w-full max-w-sm space-y-3">
    <div className="flex items-baseline justify-between gap-6">
      <span className="text-sm font-medium text-foreground">Locked forecast weighting</span>
      <span className="font-mono text-sm tabular-nums text-muted-foreground">{value}%</span>
    </div>
    <Slider
      aria-label="Locked forecast weighting"
      value={value}
      onValueChange={setValue}
      disabled
    />
  </div>
);

Allocation with progress

Slider, Badge, and Progress can share one value when an allocation control needs context and confirmation.

Senior team allocationAdjust the advisory mix before publishing the plan.

Planning

Capacity model

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

return (
  <div className="w-full max-w-md space-y-4">
    <div className="flex flex-wrap items-center justify-between gap-3">
      <div className="flex flex-col gap-1">
        <span className="text-sm font-medium text-foreground">Senior team allocation</span>
        <span className="text-xs text-muted-foreground">
          Adjust the advisory mix before publishing the plan.
        </span>
      </div>
      <Badge variant="primary">Planning</Badge>
    </div>
    <Slider
      aria-label="Senior team allocation"
      value={value}
      onValueChange={setValue}
      min={25}
      max={90}
      step={5}
      formatValue={(current) => `${current}% senior team allocation`}
    />
    <Progress value={value} label="Capacity model" showValue />
  </div>
);

When to use it

Use it for

Continuous or stepped numeric adjustments where dragging gives useful feedback.
Budget mix, weighting, thresholds, or capacity settings that need a visible current value.
Controlled state where the parent updates adjacent labels, progress, or calculated summaries.

Reach for something else

Exact numeric entry or values users must type precisely — use Input instead.
Finite named options such as office, capability, or owner — use Select instead.
Read-only completion or progress display — use Progress instead.

Props

Prop	Type	Default	Description
value / onValueChange	number / (value: number) => void	—	Controlled value pair; the parent owns state and receives every drag or keyboard change.
min / max / step	number	0 / 100 / 1	Numeric range and increment.
aria-label	string	—	Required accessible name for the thumb.
formatValue	(value: number) => string	—	Formats the value text announced by assistive technology, such as a seek bar time.