Slider

A user-draggable control for choosing a single number within a bounded range — the canonical glass slider.

import { Slider } from "@liquidify/react/slider"

Overview

Basic Slider

A focused starting point showing Slider with its essential configuration.

API

Prop	Type	Default	Description
className	string \| undefined	—	Optional additional CSS class merged into the glass surface class. The supported per-instance customisation seam: override any `--lq-*` custom property from this class's CSS — the token cascade the engine reads (ADR-0004). No raw inline style is involved, so this stays ADR-0003 clean.
defaultValue	number \| undefined	min	Uncontrolled seed for the internal value (ignored once {@link SliderProps.value} is supplied). Clamped into `[min, max]`.
disabled	boolean \| undefined	—	When `true`, the slider is dimmed (fill dimmed + thumb greyed), removed from the tab order (`tabIndex={-1}`), and all pointer / keyboard interaction is suppressed. Since the root is a `<div role="slider">` (no native `disabled`), this sets `aria-disabled` plus a `data-disabled` styling hook.
labelProps	LabelProps \| undefined	—	Per-instance typography override for the bound labels, forwarded to the internal {@link Text} (ADR-0028). Token-backed axes only; the HIG default is `variant="footnote"` / `color="secondary"`. Applies only when a bound label is a string/number — an `<Icon>` / element bound passes through unwrapped.
max	number \| undefined	1	Upper bound of the value range.
maxLabel	ReactNode	—	Trailing bound label for `variant="bounds"` — an `<Icon>` / `ReactNode` flanking the shortened track (the SwiftUI `maximumValueLabel` analogue). Decorative; it does not supply the accessible name.
min	number \| undefined	0	Lower bound of the value range.
minLabel	ReactNode	—	Leading bound label for `variant="bounds"` — an `<Icon>` / `ReactNode` flanking the shortened track (the SwiftUI `minimumValueLabel` analogue). Decorative; it does not supply the accessible name.
onChange	((next: number) => void) \| undefined	—	Fires with the next clamped/snapped number whenever the value moves — pointer jump, drag, or a keyboard step. Always called, in both controlled and uncontrolled modes.
onEditingChanged	((editing: boolean) => void) \| undefined	—	Fires `true` on press / drag start and `false` on release — the SwiftUI `onEditingChanged` analogue.
ref	Ref<HTMLDivElement> \| undefined	—	Forwarded ref to the rendered element — the component's native root (or the merged child element on a component that opts into {@link SlottableProps}). Generic over `E` (charter `docs/api-conventions.md` §4 rule 1, default `HTMLElement`) so a component with a polymorphic root (Link's navigation / action mode union, Text's `as`) can instantiate the concrete element per variant instead of leaving every consumer with a widened `Ref<HTMLElement>`. A component that does not narrow simply inherits the `HTMLElement` default — source-compatible with every pre-existing non-generic `extends ControlProps`.
step	number \| undefined	`0` (continuous)	Snap increment. `0` is continuous (free movement); a positive value snaps the committed value to the nearest `min + round((raw - min) / step) * step` and drives the `stepped` keyboard increment.
tint	LiquidTintValue \| undefined	blue	System-accent of the minimum-track fill (the SwiftUI `.tint(_:)` analogue), drawn from the restricted {@link LIQUID_COLORS } palette and applied via the `data-tint` attribute selector in CSS. Per Apple HIG the slider fill is system blue, so Slider defaults to `"blue"` (unlike Toggle's green).
value	number \| undefined	—	Controlled value. Passing this switches Slider to controlled mode: the rendered value always reflects this prop (clamped into `[min, max]`) and the consumer owns it via {@link SliderProps.onChange}.
variant	SliderVariant \| undefined	plain	The init-form family of the slider ({@link SliderVariant}), resolved via the `data-variant` CSS selector.

Tokens

Name	Value
--lq-color-accent	#007aff
--lq-color-action-secondary	rgba(120, 120, 128, 0.16)
--lq-color-bg-primary	#ffffff
--lq-color-separator	rgba(60, 60, 67, 0.14)
--lq-color-system-blue-default-dark	#0091ff
--lq-color-system-blue-default-light	#0088ff
--lq-glass-	440.71.15var(--lq-segmented-control-indicator-blur)calc(var(--lq-glass-material-blur) * 8)var(--lq-shadow-presentational)
--lq-hit-target-touch	2.75rem
--lq-lens-progress	Resolved by the active Liquidify theme
--lq-lens-stretch	Resolved by the active Liquidify theme
--lq-lens-x	Resolved by the active Liquidify theme
--lq-radius-pill	9999rem
--lq-shadow-ambient-	0 0.125rem 0.375rem rgba(0, 0, 0, 0.10)0 0.5rem 1.375rem rgba(0, 0, 0, 0.20)0 0.75rem 1.75rem rgba(0, 0, 0, 0.14)
--lq-slider-bounds-gap	var(--lq-space-8)
--lq-slider-lens-clamp-glassy	Component-defined value
--lq-slider-lens-clamp-rest	Component-defined value
--lq-slider-track-w	calc(var(--lq-space-64) * 3 + var(--lq-space-24))
--lq-space-	0.0625rem0.125rem0.25rem0.5rem0.75rem1rem1.25rem1.5rem2rem2.5rem3rem3.5rem
--lq-thumb-	calc(var(--lq-space-32) + var(--lq-space-2))var(--lq-space-56)var(--lq-space-40)
--lq-thumb-lens-h	var(--lq-space-40)
--lq-thumb-lens-w	var(--lq-space-56)
--lq-thumb-pill-h	Component-defined value
--lq-thumb-pill-w	Component-defined value
--lq-toggle-	var(--lq-space-2)var(--lq-toggle-pad, var(--lq-space-2))0.55calc(var(--lq-space-64) + var(--lq-space-8))calc(var(--lq-space-40) + var(--lq-space-4))var(--lq-space-32)calc(var(--lq-space-16) + var(--lq-space-4))calc(var(--lq-toggle-track-h, var(--lq-space-32)) - 2 * var(--lq-toggle-pad, var(--lq-space-2)))var(--lq-space-24)var(--lq-thumb-lens-h)var(--lq-thumb-lens-w)calc( var(--lq-toggle-track-w, var(--lq-space-56)) - 2 * var(--lq-toggle-hpad, var(--lq-space-2)) - var(--lq-toggle-thumb-w, var(--lq-space-32)) )

Component catalog

Browse the public controls by interaction purpose. Every result links to generated API facts, accessibility behavior, source, and exhaustive stories.

API

Prop	Type	Default	Description
className	string \| undefined	—	Optional additional CSS class merged into the glass surface class. The supported per-instance customisation seam: override any `--lq-*` custom property from this class's CSS — the token cascade the engine reads (ADR-0004). No raw inline style is involved, so this stays ADR-0003 clean.
defaultValue	number \| undefined	min	Uncontrolled seed for the internal value (ignored once {@link SliderProps.value} is supplied). Clamped into `[min, max]`.
disabled	boolean \| undefined	—	When `true`, the slider is dimmed (fill dimmed + thumb greyed), removed from the tab order (`tabIndex={-1}`), and all pointer / keyboard interaction is suppressed. Since the root is a `<div role="slider">` (no native `disabled`), this sets `aria-disabled` plus a `data-disabled` styling hook.
labelProps	LabelProps \| undefined	—	Per-instance typography override for the bound labels, forwarded to the internal {@link Text} (ADR-0028). Token-backed axes only; the HIG default is `variant="footnote"` / `color="secondary"`. Applies only when a bound label is a string/number — an `<Icon>` / element bound passes through unwrapped.
max	number \| undefined	1	Upper bound of the value range.
maxLabel	ReactNode	—	Trailing bound label for `variant="bounds"` — an `<Icon>` / `ReactNode` flanking the shortened track (the SwiftUI `maximumValueLabel` analogue). Decorative; it does not supply the accessible name.
min	number \| undefined	0	Lower bound of the value range.
minLabel	ReactNode	—	Leading bound label for `variant="bounds"` — an `<Icon>` / `ReactNode` flanking the shortened track (the SwiftUI `minimumValueLabel` analogue). Decorative; it does not supply the accessible name.
onChange	((next: number) => void) \| undefined	—	Fires with the next clamped/snapped number whenever the value moves — pointer jump, drag, or a keyboard step. Always called, in both controlled and uncontrolled modes.
onEditingChanged	((editing: boolean) => void) \| undefined	—	Fires `true` on press / drag start and `false` on release — the SwiftUI `onEditingChanged` analogue.
ref	Ref<HTMLDivElement> \| undefined	—	Forwarded ref to the rendered element — the component's native root (or the merged child element on a component that opts into {@link SlottableProps}). Generic over `E` (charter `docs/api-conventions.md` §4 rule 1, default `HTMLElement`) so a component with a polymorphic root (Link's navigation / action mode union, Text's `as`) can instantiate the concrete element per variant instead of leaving every consumer with a widened `Ref<HTMLElement>`. A component that does not narrow simply inherits the `HTMLElement` default — source-compatible with every pre-existing non-generic `extends ControlProps`.
step	number \| undefined	`0` (continuous)	Snap increment. `0` is continuous (free movement); a positive value snaps the committed value to the nearest `min + round((raw - min) / step) * step` and drives the `stepped` keyboard increment.
tint	LiquidTintValue \| undefined	blue	System-accent of the minimum-track fill (the SwiftUI `.tint(_:)` analogue), drawn from the restricted {@link LIQUID_COLORS } palette and applied via the `data-tint` attribute selector in CSS. Per Apple HIG the slider fill is system blue, so Slider defaults to `"blue"` (unlike Toggle's green).
value	number \| undefined	—	Controlled value. Passing this switches Slider to controlled mode: the rendered value always reflects this prop (clamped into `[min, max]`) and the consumer owns it via {@link SliderProps.onChange}.
variant	SliderVariant \| undefined	plain	The init-form family of the slider ({@link SliderVariant}), resolved via the `data-variant` CSS selector.

Component catalog

Slider

Overview

Basic Slider

API

Guidelines

Accessibility

Tokens

Liquid material

Typed API

Accessible by default

Component catalog

Slider

Overview

Basic Slider

API

Guidelines

Accessibility

Tokens

Liquid material

Typed API

Accessible by default