Slider stops

Pro

A slider over a few named stops, "Low", "Medium", "High", in place of numbers: for a setting whose values are ordered words (effort, detail, autonomy). The thumb snaps to the stops, reads as the chosen stop's name (not its position), and every stop's name is shown under the track at its place; clicking a name moves the thumb there. The names aren't extra tab stops: the thumb reads them.

Nothing is pre-selected: with value null (or no defaultValue) the thumb waits at the start, drawn hollow, and reads "Not chosen" until the person moves it, presses a stop's name, or presses Home there. Right to left, the stops run from the right and the arrow keys follow them.

Markdown

Version 5.2.0· other versions

This page is for 5.2.0, the current release. An earlier release’s page is the Markdown that release published, so the docs match the version you have installed (candor-lock.json records it).

Not in the docs of 1.3.0, 1.4.0, 1.5.0, 1.5.1, 1.6.0, 1.7.0, 1.8.0, 1.8.1, 1.9.0, 1.9.1, 2.0.0, 2.1.0, 2.2.0, 2.3.0, 2.4.0, 2.5.0, 2.5.1, 2.6.0, 2.6.1, 2.6.2, 2.7.0, 2.8.0, 2.9.0, 2.10.0, 3.0.0, 4.0.0, 4.0.1, 4.0.2, 4.1.0 and 4.2.0: the page came later, or had another name then.

Docs pages weren’t kept for 1.0.0, 1.0.1, 1.1.0, 1.1.1, 1.2.0 and 1.2.1: they are kept from 1.3.0 on, and before that only llms.txt was published.

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/slider-stops

Brings in: bidi, locale, slider, tokens, utils · npm: @base-ui/react@^1.9.0, lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import * as React from "react"
import { SliderStops } from "@/components/candor/ui/slider-stops"

const efforts = [
  { value: "low", label: "Low" },
  { value: "medium", label: "Medium" },
  { value: "high", label: "High" },
  { value: "max", label: "Maximum" },
]

// Named stops in place of numbers. Nothing is chosen at first: the thumb waits, hollow, and reads "Not chosen" until
// the person moves it or presses a name. The visible words are the start of the thumb's name, `label`.
export default function Example() {
  const [effort, setEffort] = React.useState<string | null>(null)
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <span aria-hidden className="text-sm font-medium">
        Effort
      </span>
      <SliderStops label="Effort" stops={efforts} value={effort} onValueChange={setEffort} />
    </div>
  )
}

<SliderStops>

Prop	Type	Default	Description
stopsrequired	`SliderStop[]`	—	The stops in order, two or more.
value	`string \| null \| undefined`	—	The chosen stop's value, when the app controls it; `null` while nothing is chosen. A value that is none of the stops' values leaves the thumb unchosen at the start, and the thumb reads that value as it is, not "Not chosen".
defaultValue	`string \| undefined`	—	The stop chosen at first, when the slider keeps its own state. Leave it out so nothing is chosen for the person.
onValueChange	`((value: string) => void) \| undefined`	—	Called with the value of the stop the person chooses.
labelrequired	`string`	—	The thumb's name, what the setting is: "Effort".
locked	`string \| null \| undefined`	—	Why the setting can't be changed right now. The thumb stays focusable, ignores the pointer and keys, and says why.
className	`string \| undefined`	—	Classes for the outer box.

Strings

The fixed words, in English by default. Change any of them under sliderStops in <LocaleProvider strings={{ … }}>; the table is exported as sliderStopsStrings.

Key	English
notChosen	Not chosen

Motion

Moment	Family	What it does
tint	tint	The thumb's ring fades in when the pointer is over it and when it takes keyboard focus, and it fills when a stop is chosen.

Set with --cd-motion-slider-stops-<moment>-* in your brand file; the families are in the design reference.

Types

SliderStop: One named stop on a `SliderStops`: the value the app gets and the word the person reads.; { /** The value reported when this stop is chosen. */ value: string; /** The stop's name, shown under the track and read as the thumb's value: "Medium". */ label: string; }