XDS — Design System

XDSSlider@xds/core · Slider

Preview coming soon

Usage

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.

Best practices

Guidance	Practices
Do	Always provide a label, even if visually hidden, so the slider is accessible to screen readers.
Do	Format values with meaningful units like "$50" or "75%" instead of raw numbers.
Don't	Use for precise numeric entry — pair with a text input or use NumberInput instead.
Don't	Set a step size so large that only a few positions are possible — use SegmentedControl or radio buttons instead.

Import

ts
import {XDSSlider} from '@xds/core/Slider'

Props

Prop	Type	Description
labelrequired	string	Label text (always rendered for accessibility).
valuerequired	number \| [number, number]	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.
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.
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	XDSInputStatus	Status indicator object (`{ type, message }`) for validation feedback.
labelTooltip	string	Tooltip text for an info icon displayed next to the label.
xstyle	StyleXStyles	StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value — not an inline style object like style={{}}.

Examples

Common configurations, variations, and states.

Slider — Formatted ValueSlider with custom formatting showing temperature in Fahrenheit.

tsx
'use client';
import {useState} from 'react';
import {XDSSlider} from '@xds/core/Slider';
export default function SliderFormattedValue() {
  const [value, setValue] = useState(72);
  return (
    <XDSSlider
      label="Temperature"
      value={value}
      onChange={setValue}
      valueDisplay="text"
      min={60}
      max={90}
      step={1}
      formatValue={(v: number) => `${v}\u00B0F`}
    />
  );
}

Slider — RangeRange slider for selecting a value range like price bounds.

tsx
'use client';
import {useState} from 'react';
import {XDSSlider} from '@xds/core/Slider';
export default function SliderRangeSlider() {
  const [value, setValue] = useState<[number, number]>([20, 80]);
  return <XDSSlider label="Price range" value={value} onChange={setValue} />;
}

Slider — Validation StatesSliders with error, warning, and success validation states.

tsx
'use client';
import {useState} from 'react';
import {XDSSlider} from '@xds/core/Slider';
import {XDSVStack} from '@xds/core/Layout';
import {XDSCenter} from '@xds/core/Center';
export default function SliderWithStatus() {
  const [value1, setValue1] = useState(95);
  const [value2, setValue2] = useState(50);
  const [value3, setValue3] = useState(75);
  return (
    <XDSCenter width={400}>
      <XDSVStack gap={6}>
        <XDSSlider
          label="CPU Usage"
          value={value1}
          onChange={setValue1}
          status={{type: 'error', message: 'CPU usage is critically high'}}
        />
        <XDSSlider
          label="Memory"
          value={value2}
          onChange={setValue2}
          status={{type: 'warning', message: 'Memory usage is moderate'}}
        />
        <XDSSlider
          label="Disk"
          value={value3}
          onChange={setValue3}
          status={{type: 'success', message: 'Disk usage is healthy'}}
        />
      </XDSVStack>
    </XDSCenter>
  );
}

Slider — With MarksSlider with labeled tick marks at fixed intervals.

tsx
'use client';
import {useState} from 'react';
import {XDSSlider} from '@xds/core/Slider';
export default function SliderWithMarks() {
  const [value, setValue] = useState(50);
  return (
    <XDSSlider
      label="Volume"
      value={value}
      onChange={setValue}
      marks={[
        {value: 0, label: '0'},
        {value: 25, label: '25'},
        {value: 50, label: '50'},
        {value: 75, label: '75'},
        {value: 100, label: '100'},
      ]}
    />
  );
}

Showcase source

tsx
'use client';
import {XDSSlider} from '@xds/core/Slider';
export default function SliderShowcase() {
  return <XDSSlider label="Volume" value={50} />;
}