{"slug":"slider","name":"Slider","packageName":"@liquidify/react","category":"controls","maturity":"experimental","summary":"A user-draggable control for choosing a single number within a bounded range — the canonical glass slider.","importPath":"@liquidify/react/slider","sourcePath":"packages/@liquidify/react/src/components/slider/slider.tsx","specPath":"packages/@liquidify/react/src/components/slider/spec.md","docsPath":"../liquidify-page/content/component-source/slider.md","documentationStatus":"draft","storyIds":["controls-slider--default"],"additionalExports":["LiquidColor","LiquidTintValue","SliderVariant","TintableControlProps"],"anatomy":[],"props":[{"name":"className","type":"string | undefined","required":false,"description":"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.","declaredIn":"packages/@liquidify/react/src/liquid-component-props.ts"},{"name":"defaultValue","type":"number | undefined","required":false,"description":"Uncontrolled seed for the internal value (ignored once {@link SliderProps.value} is supplied). Clamped into `[min, max]`.","defaultValue":"`min`","declaredIn":"packages/@liquidify/react/src/components/slider/slider.tsx"},{"name":"disabled","type":"boolean | undefined","required":false,"description":"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.","declaredIn":"packages/@liquidify/react/src/components/slider/slider.tsx"},{"name":"labelProps","type":"LabelProps | undefined","required":false,"description":"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.","declaredIn":"packages/@liquidify/react/src/components/slider/slider.tsx"},{"name":"max","type":"number | undefined","required":false,"description":"Upper bound of the value range.","defaultValue":"`1`","declaredIn":"packages/@liquidify/react/src/components/slider/slider.tsx"},{"name":"maxLabel","type":"ReactNode","required":false,"description":"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.","declaredIn":"packages/@liquidify/react/src/components/slider/slider.tsx"},{"name":"min","type":"number | undefined","required":false,"description":"Lower bound of the value range.","defaultValue":"`0`","declaredIn":"packages/@liquidify/react/src/components/slider/slider.tsx"},{"name":"minLabel","type":"ReactNode","required":false,"description":"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.","declaredIn":"packages/@liquidify/react/src/components/slider/slider.tsx"},{"name":"onChange","type":"((next: number) => void) | undefined","required":false,"description":"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.","declaredIn":"packages/@liquidify/react/src/components/slider/slider.tsx"},{"name":"onEditingChanged","type":"((editing: boolean) => void) | undefined","required":false,"description":"Fires `true` on press / drag start and `false` on release — the SwiftUI `onEditingChanged` analogue.","declaredIn":"packages/@liquidify/react/src/components/slider/slider.tsx"},{"name":"ref","type":"Ref<HTMLDivElement> | undefined","required":false,"description":"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`.","declaredIn":"packages/@liquidify/react/src/liquid-component-props.ts"},{"name":"step","type":"number | undefined","required":false,"description":"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.","defaultValue":"`0` (continuous)","declaredIn":"packages/@liquidify/react/src/components/slider/slider.tsx"},{"name":"tint","type":"LiquidTintValue | undefined","required":false,"description":"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).","defaultValue":"`\"blue\"`","declaredIn":"packages/@liquidify/react/src/components/slider/slider.tsx"},{"name":"value","type":"number | undefined","required":false,"description":"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}.","declaredIn":"packages/@liquidify/react/src/components/slider/slider.tsx"},{"name":"variant","type":"SliderVariant | undefined","required":false,"description":"The init-form family of the slider ({@link SliderVariant}), resolved via the `data-variant` CSS selector.","defaultValue":"`\"plain\"`","declaredIn":"packages/@liquidify/react/src/components/slider/slider.tsx"}],"swiftUIMap":[{"swiftUI":"`value: Binding<V>`","react":"`value` (controlled) / `defaultValue` (uncontrolled seed)","notes":"The controlled-value triad (ADR-0015); a `Binding` splits into the controlled `value` + `onChange`, or the uncontrolled `defaultValue`.","relationship":"direct"},{"swiftUI":"`in: ClosedRange<V>`","react":"`min` / `max`","notes":"The closed range's bounds (defaults `0` / `1`).","relationship":"direct"},{"swiftUI":"`step: V.Stride`","react":"`step` (+ `variant=\"stepped\"`)","notes":"Snap increment; presence of a positive `step` drives the `stepped` variant.","relationship":"direct"},{"swiftUI":"`label: () -> Label`","react":"accessible label (`aria-label` / `aria-labelledby`)","notes":"SwiftUI's label is the accessible name; Slider renders no visible label text of its own.","relationship":"direct"},{"swiftUI":"`minimumValueLabel: () -> ValueLabel`","react":"`minLabel`","notes":"Leading bound label for `variant=\"bounds\"`; an `<Icon>` / `ReactNode`. A string/number renders through the `Text` primitive (`variant=\"footnote\"`, `color=\"secondary\"`); an `<Icon>`/element passes through unwrapped (ADR-0028).","relationship":"direct"},{"swiftUI":"`maximumValueLabel: () -> ValueLabel`","react":"`maxLabel`","notes":"Trailing bound label for `variant=\"bounds\"`; an `<Icon>` / `ReactNode` (same `Text` routing as `minLabel`).","relationship":"direct"},{"swiftUI":"`.font(_:)` / `.foregroundStyle(_:)` on the bounds","react":"`labelProps` (`Pick<TextProps, …>`)","notes":"Per-instance typography override forwarded to the internal `Text` of both bound labels (token-backed axes only; ADR-0028). Applies only to string/number bounds.","relationship":"direct"},{"swiftUI":"`onEditingChanged: (Bool) -> Void`","react":"`onChange(next: number)` + optional `onEditingChanged?(editing: boolean)`","notes":"`onChange` fires the next clamped/snapped value on every move; `onEditingChanged` (optional) fires `true` on press / drag start and `false` on release, mirroring SwiftUI exactly.","relationship":"direct"}],"tokens":["--lq-color-accent","--lq-color-action-secondary","--lq-color-bg-primary","--lq-color-separator","--lq-color-system-blue-default-dark","--lq-color-system-blue-default-light","--lq-glass-","--lq-hit-target-touch","--lq-lens-progress","--lq-lens-stretch","--lq-lens-x","--lq-radius-pill","--lq-shadow-ambient-","--lq-slider-bounds-gap","--lq-slider-lens-clamp-glassy","--lq-slider-lens-clamp-rest","--lq-slider-track-w","--lq-space-","--lq-thumb-","--lq-thumb-lens-h","--lq-thumb-lens-w","--lq-thumb-pill-h","--lq-thumb-pill-w","--lq-toggle-"],"keyboard":[{"key":"Keyboard","action":"Keyboard (ARIA-APG slider, ADR-0017): →/↑ increment, ←/↓ decrement by step (or 1% of range when plain/continuous); Home → min, End → max; PageUp/PageDown → ±10% of range. Each keypress preventDefaults, commits the clamped/snapped value, and lens.moveTo(px) (spring, no follow) animates the thumb to the new position."}],"variants":["bounds","plain","stepped"],"variantPages":[]}