Skip to content

Detent Slider

motion.dev

Drags freely, then springs into the nearest step with overshoot.

Temperature
0.8
Balanced
0.00.40.81.21.62.0

Install

$ npx shadcn@latest add https://spotcheckui.com/r/detent-slider.json

Also installs motion.

Usage

"use client"

import { DetentSlider } from "@/components/spotcheck/detent-slider"

const zones = [
  { from: 0, to: 0.4, label: "Deterministic" },
  { from: 0.6, to: 1.2, label: "Balanced" },
  { from: 1.4, to: 2, label: "Creative" },
]

<DetentSlider
  label="Temperature"
  min={0}
  max={2}
  step={0.2}
  defaultValue={0.8}
  zones={zones}
  onValueChange={setTemperature}
/>

onValueChange runs when the slider lands on a step. Screen readers hear the value and its zone together, such as "0.8, Balanced".

Props

  • label * RequiredstringDefault —Names the control for screen readers and prints above the value.
  • minnumberDefault 0The lowest value.
  • maxnumberDefault 100The highest value.
  • stepnumberDefault 1Distance between detents.
  • valuenumberDefault —The current value, when you control the slider.
  • defaultValuenumberDefault —The starting value, when the slider manages itself.
  • onValueChange(value: number) => voidDefault —Runs when the slider lands on a new step, not on every pointer move.
  • zonesDetentZone[]Default []Named ranges, such as Deterministic, Balanced and Creative.
  • marksnumber[]Default [min, max]Values to print under the track. Defaults to the two ends.
  • format(value: number) => stringDefault Built inFormats the readout and marks. Pass it from a client component.
  • spring{ stiffness: number; damping: number; }Default { stiffness: 380, damping: 12 }The spring used when landing on a step.
  • classNamestringDefault —Added to the outer element.

Keyboard

→ ↑Move up one step
← ↓Move down one step
HomeJump to the minimum
EndJump to the maximum

Reduced motion

The thumb jumps straight to its step, with no spring.