Slider·component·@astryxdesign/core

Slider

A draggable control for selecting a numeric value or range within defined bounds. Supports single value and range selection, tick marks, custom value formatting, and vertical orientation. Use it when users need to explore a continuous range, such as volume, price, or percentage.

Open in Playground @astryxdesign/core/Slider

Showcases and examples

5 documented examples

Slider

A slider control set to 50%.

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · slider-showcase

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {useState} from 'react';
import {Slider} from '@astryxdesign/core/Slider';

export default function SliderShowcase() {
  const [value, setValue] = useState(50);
  return (
    <Slider
      label="Volume"
      value={value}
      onChange={setValue}
      style={{width: 300}}
    />
  );
}

Usage

Always provide a label, even if visually hidden, so the slider is accessible to screen readers.
Format values with meaningful units like "$50" or "75%" instead of raw numbers.
Use for precise numeric entry; pair with a text input or use NumberInput instead.
Set a step size so large that only a few positions are possible; use SegmentedControl or radio buttons instead.
Wrap a disabled slider in Tooltip to explain why it is disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead.

Typed props

Prop	Type and behavior
`label`	`string` · required Label text (always rendered for accessibility).
`value`	`number \| [number, number]` · required Current value: a `number` for single thumb mode or `[number, number]` for range mode.
`onChange`	`(value: number) => void \| (value: [number, number]) => void` Callback fired on value change during drag.
`onChangeEnd`	`(value: number) => void \| (value: [number, number]) => void` Callback fired when drag ends.
`min`	`number` · default 0 Minimum value.
`max`	`number` · default 100 Maximum value.
`step`	`number` · default 1 Step increment.
`orientation`	`'horizontal' \| 'vertical'` · default 'horizontal' Orientation of the slider.
`formatValue`	`(value: number) => string` Custom value formatting function used for display and `aria-valuetext`.
`valueDisplay`	`'tooltip' \| 'text' \| 'none'` · default 'tooltip' How the current value is displayed.
`marks`	`Array<{ value: number; label?: string }>` Tick marks at specified positions with optional labels. Unfilled marks use the track color; marks inside the filled region (at or behind the thumb, or between the thumbs in range mode) use the fill color.
`minStepsBetweenThumbs`	`number` · default 0 Minimum number of steps between thumbs in range mode; prevents thumbs from overlapping.
`isDisabled`	`boolean` · default false Whether the slider is disabled.
`htmlName`	`string` The HTML name attribute for form submissions. Renders hidden inputs carrying the current value (two entries in range mode).
`disabledMessage`	`string` Explains why the slider is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the thumb focusable via aria-disabled (value changes stay blocked). Use this instead of wrapping a disabled Slider in Tooltip. Disabled controls swallow the hover events an external Tooltip needs.
`isOptional`	`boolean` · default false Whether the field is optional.
`isRequired`	`boolean` · default false Whether the field is required.
`isLabelHidden`	`boolean` · default false Whether to visually hide the label.
`description`	`string` Description text rendered below the label.
`status`	`{type: 'warning' \| 'error' \| 'success', message?: string}` Status indicator object (`{ type, message }`) for validation feedback.
`labelTooltip`	`string` Tooltip text for an info icon displayed next to the label.
`width`	`SizeValue` Width of the field (number = pixels, string used as-is, e.g. "100%"). Sizes the whole field (label, control, and status) so they stay aligned.
`xstyle`	`StyleXStyles` StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value, not an inline style object like style={{}}.

Anatomy

Label · required

Text identifying the numeric setting controlled by the slider.

Description · optional

Helper text between the label and the slider control.

Slider · required

Control row containing the track, thumb or thumbs, and optional text value.

Interactive control · required

Pointer and keyboard interaction surface containing the rail, fill, marks, and thumbs.

Track · required

Background rail representing the available numeric range.

Filled range · required

Accent segment from the minimum to a single value, or between two range values.

Tick mark · optional

Position marker supplied through the marks collection.

Mark label · optional

Optional text displayed beside a tick mark.

Thumb · required

Draggable value indicator; range mode renders a minimum and maximum thumb.

Value display · optional

Formatted current value shown beside the slider when valueDisplay is text.

Value tooltip · optional

Formatted current value shown in a tooltip when valueDisplay is tooltip.

Status message · optional

Error, warning, or success message below the slider.

Accessibility

Thumb

Color contrast · 1.4.11 Non-text Contrast · 3:1

The thumb must have at least 3:1 contrast with the track and the surface behind it. Pointer down is the whole drag: measure the thumb with the pressed overlay applied.

States: Rest, Hover, Pointer down

Theming

Targets

astryx-slider

Visual props: orientation

States: disabled

astryx-slider-control

Visual props: orientation

States: disabled

astryx-slider-track

Visual props: orientation

astryx-slider-thumb

Visual props: orientation

States: disabled