Range Slider

Controlled slider for continuous or discrete numeric adjustment, with optional drag tooltip.

Overview

RangeSlider is the shared slider control for numeric adjustment.

Use it when the interaction is better expressed as dragging across a range rather than typing into a field.

Common fits:

visual tuning controls
discrete density or count settings
percentage-style adjustments

Basic Usage

<RangeSlider
  min={0}
  max={100}
  value={cornerRadius}
  onChange={setCornerRadius}
  step={5}
  showValueInTooltip
  formatValue={(value) => `${value}%`}
/>

This mirrors the pattern used in QrTemplateModal.tsx.

Discrete Slider

Use discrete when the slider should snap to stepped values.

<RangeSlider
  min={1}
  max={4}
  value={columnCount}
  onChange={setColumnCount}
  discrete
  step={1}
  showValueInTooltip
  formatValue={(value) => `${value} columns`}
/>

This is the same pattern used by the data-table density control.

Props

Prop	Type	Default	Description
`max`	`number`	`100`	Maximum slider value.
`value`	`number`	—	Current value.
`onChange`	`(value: number) => void`	—	Required. Called when the value changes.
`min`	`number`	`0`	Minimum slider value.
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`	Slider orientation.
`trackColor`	`string`	blue token	Active track color.
`incompleteTrackColor`	`string`	gray token	Inactive track color.
`handleColor`	`string`	—	Optional handle color override.
`discrete`	`boolean`	`false`	Enables snapped stepped values.
`step`	`number`	—	Step size, especially relevant in discrete mode.
`notchLimit`	`number`	`5`	Caps the effective max when discrete mode is used.
`inverted`	`boolean`	`false`	Reverses progress direction.
`className`	`string`	—	Additional wrapper classes.
`trackSize`	`number`	`12`	Track thickness in pixels.
`showValueInTooltip`	`boolean`	`false`	Shows the current value in a tooltip while dragging.
`formatValue`	`(value: number) => string`	`value.toFixed(2)`	Formats the tooltip label.

Brand Dashboard Usage

Pattern	Path	Notes
QR style tuning	`fsai/apps/brand-dashboard/src/pages/StudioQrTemplates/QrTemplateModal.tsx`	Continuous percentage-style adjustment.
Data-table density control	`fsai/packages/shared-ui/src/components/DataTable/toolbar/GridDensityToggle.tsx`	Discrete snapped values with tooltip formatting.

Important Cautions

RangeSlider is fully controlled; the parent owns the value.
Discrete mode changes how step and notchLimit behave.
The value tooltip is only shown while dragging when showValueInTooltip is enabled.
This is a drag-oriented control, not a precise numeric-entry replacement.

Guidelines

Do use RangeSlider for tuning-style numeric controls
Do use discrete when only stepped values make sense
Do provide formatValue when the raw number is not user-friendly
Don't use RangeSlider when the user needs exact freeform numeric entry more than quick adjustment