Fader

A Fader moves one cap along a track of ordered levels, like a channel on a mixing desk. The first level is the "off" position and is drawn unfilled; every level above it fills the track. The large variant is the interactive control for a detail view or flyout; the small variant is a 62px, read-only indicator for dense list rows.

UsageCopy Anchor Link

import { Fader } from '@cajon-ui/react';

const levels = [
  { value: 'off', label: 'Off' },
  { value: 'alpha', label: 'Alpha', caption: '● current' },
  { value: 'beta', label: 'Beta' },
  { value: 'everyone', label: 'Everyone' },
];

// Detail view / flyout
<Fader aria-label="Level" levels={levels} value={level} savedValue={saved} onChange={setLevel} />

// List row
<Fader size="sm" levels={levels} value={level} aria-label={`Level: ${level}`} />

Click or drag anywhere on the track to snap to the nearest detent, click a label, or use the keyboard. savedValue draws a dashed ghost cap at the persisted level while the chosen value differs, so unsaved moves are visible.

AccessibilityCopy Anchor Link

The large cap is a single tab stop with role="slider". Arrow keys move one detent; Home jumps to the first level and End to the last. Screen readers hear the label plus any level description, for example "Beta (includes Alpha)". The labels under the track are mouse targets only and are hidden from assistive technology. The small variant is aria-hidden unless you pass aria-label, which makes it a labelled image — keep it hidden when the row already states the level in text. On very narrow screens swap in a SegmentedControl; the Fader does not change shape on its own.

PropsCopy Anchor Link

Each level has value and label, with optional caption (a small line under the label) and description (appended to the screen-reader value).