XDS — Design System

Slider@xds/core · XDSSlider v0.0.13

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.

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

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.

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} />;
}

Usage

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

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.

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`} /> ); }

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} />; }

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> ); }

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'}, ]} /> ); }