Slider

GradeTested

UsageCopy Anchor Link

import { Field, FieldLabel, Slider } from "@cadence-clinical/ui";

<Field>
  <FieldLabel>Text size</FieldLabel>
  <Slider defaultValue={100} min={80} max={150} step={10} />
</Field>;

Put the slider in a Field, whose label names it. Use a slider for a setting where the position matters more than the exact number, such as a zoom. Type a clinical value in an Input, so it is exact.

Slider follows the shadcn Slider and takes the same props, so shadcn's examples, which pass an array such as defaultValue={[50]}, work unchanged. It is built on the Base UI Slider, whose props it accepts, including onValueChange, step, largeStep and format.

A rangeCopy Anchor Link

Give an array to choose a range, with one thumb for each value. Name each thumb with thumbLabels. The Field's label still names the slider as a whole:

<Field>
  <FieldLabel>Clinic hours</FieldLabel>
  <Slider defaultValue={[9, 17]} min={7} max={20} thumbLabels={["Opens", "Closes"]} />
</Field>

What Cadence changesCopy Anchor Link

• The target is as high as a control. The strip the thumb runs along is h-control, so a press beside the thumb moves it, and the thumb's own target reaches the same height. shadcn's thumb is 12px with a 28px target. Here the thumb follows the density: 16px compact and 20px comfortable.
• The whole range can be seen. shadcn draws the unfilled track in muted, about 1.1:1 on the page. Here it is the input colour, which the token tests hold at 3:1 on the page, a card and a popover.
• A single value has one thumb. shadcn counts its thumbs from an array and draws two for anything else, so defaultValue={50}, or no value at all, shows two thumbs over one value. Here a number, or no value, gives one thumb, and an array gives one per value, as in shadcn.
• Each thumb of a range can be named, with thumbLabels.
• Semantic colours only. The thumb is the background colour with a primary border, where shadcn's is white.

AccessibilityCopy Anchor Link

• Each thumb is a range input. The arrow keys move it by step, Page Up and Page Down by largeStep, and Home and End to either end.
• Set format to give the value in words, such as { style: "unit", unit: "percent" }, which a screen reader reads as "110%".
• The thumb shows a focus ring.

PropsCopy Anchor Link