slider

The Slider component allows users to select a value from a range.

Usage & Examples

Default

50
default.tsx

  const [value, setValue] = useState(50);
  <Slider
    min={0}
    max={100}
    step={1}
    value={value}
    onChange={(e) => setValue(Number(e.target.value))}
  />

Visual variants

Themes

primary
50
secondary
50
tertiary
50
quaternary
50

States

success
50
warning
50
error
50
info
50

Sizes

xs
50
small
50
medium
50
large
50

Variants

solid
50
outline
50
glass
50

Rounding

none
50
medium
50
large
50

Shadows

none
50
light
50
strong
50
visual-variants.tsx
// Themes

  const [value, setValue] = useState(50);
  <Slider
    min={0}
    max={100}
    step={1}
    value={value}
    onChange={(e) => setValue(Number(e.target.value))}
  />

  const [value, setValue] = useState(50);
  <Slider
    min={0}
    max={100}
    step={1}
    value={value}
    onChange={(e) => setValue(Number(e.target.value))}
  />

  const [value, setValue] = useState(50);
  <Slider
    min={0}
    max={100}
    step={1}
    value={value}
    onChange={(e) => setValue(Number(e.target.value))}
  />

  const [value, setValue] = useState(50);
  <Slider
    min={0}
    max={100}
    step={1}
    value={value}
    onChange={(e) => setValue(Number(e.target.value))}
  />

// States

  const [value, setValue] = useState(50);
  <Slider
    min={0}
    max={100}
    step={1}
    value={value}
    onChange={(e) => setValue(Number(e.target.value))}
  />

  const [value, setValue] = useState(50);
  <Slider
    min={0}
    max={100}
    step={1}
    value={value}
    onChange={(e) => setValue(Number(e.target.value))}
  />

  const [value, setValue] = useState(50);
  <Slider
    min={0}
    max={100}
    step={1}
    value={value}
    onChange={(e) => setValue(Number(e.target.value))}
  />

  const [value, setValue] = useState(50);
  <Slider
    min={0}
    max={100}
    step={1}
    value={value}
    onChange={(e) => setValue(Number(e.target.value))}
  />

// Sizes

  const [value, setValue] = useState(50);
  <Slider
    min={0}
    max={100}
    step={1}
    value={value}
    onChange={(e) => setValue(Number(e.target.value))}
  />

  const [value, setValue] = useState(50);
  <Slider
    min={0}
    max={100}
    step={1}
    value={value}
    onChange={(e) => setValue(Number(e.target.value))}
  />

  const [value, setValue] = useState(50);
  <Slider
    min={0}
    max={100}
    step={1}
    value={value}
    onChange={(e) => setValue(Number(e.target.value))}
  />

  const [value, setValue] = useState(50);
  <Slider
    min={0}
    max={100}
    step={1}
    value={value}
    onChange={(e) => setValue(Number(e.target.value))}
  />

// Variants

  const [value, setValue] = useState(50);
  <Slider
    min={0}
    max={100}
    step={1}
    value={value}
    onChange={(e) => setValue(Number(e.target.value))}
  />

  const [value, setValue] = useState(50);
  <Slider
    min={0}
    max={100}
    step={1}
    value={value}
    onChange={(e) => setValue(Number(e.target.value))}
  />

  const [value, setValue] = useState(50);
  <Slider
    min={0}
    max={100}
    step={1}
    value={value}
    onChange={(e) => setValue(Number(e.target.value))}
  />

// Rounding

  const [value, setValue] = useState(50);
  <Slider
    min={0}
    max={100}
    step={1}
    value={value}
    onChange={(e) => setValue(Number(e.target.value))}
  />

  const [value, setValue] = useState(50);
  <Slider
    min={0}
    max={100}
    step={1}
    value={value}
    onChange={(e) => setValue(Number(e.target.value))}
  />

  const [value, setValue] = useState(50);
  <Slider
    min={0}
    max={100}
    step={1}
    value={value}
    onChange={(e) => setValue(Number(e.target.value))}
  />

// Shadows

  const [value, setValue] = useState(50);
  <Slider
    min={0}
    max={100}
    step={1}
    value={value}
    onChange={(e) => setValue(Number(e.target.value))}
  />

  const [value, setValue] = useState(50);
  <Slider
    min={0}
    max={100}
    step={1}
    value={value}
    onChange={(e) => setValue(Number(e.target.value))}
  />

  const [value, setValue] = useState(50);
  <Slider
    min={0}
    max={100}
    step={1}
    value={value}
    onChange={(e) => setValue(Number(e.target.value))}
  />

Interaction states

Disabled
50
interaction-states.tsx
// Disabled

  const [value, setValue] = useState(50);
  <Slider
    min={0}
    max={100}
    step={1}
    value={value}
    onChange={(e) => setValue(Number(e.target.value))}
  />

Props API

36 props
Columns
slider props API
Default
Description
aria-describedbystringNoaria—Id of external element(s) that describe the slider.
aria-invalidboolean | "true" | "false"Noaria—Marks the slider as invalid.
aria-labelstringNoaria—Accessible label for the slider if no visible label is provided.
aria-labelledbystringNoaria—Id of external element(s) that label the slider.
aria-orientation"horizontal" | "vertical"Noaria"horizontal"Orientation of the slider.
aria-requiredboolean | "true" | "false"Noaria—Marks the slider as required for assistive technology.
aria-valuemaxnumberNoaria—Explicit maximum value for assistive technology.
aria-valueminnumberNoaria—Explicit minimum value for assistive technology.
aria-valuenownumberNoaria—Explicit current numeric value for assistive technology.
aria-valuetextstringNoaria—Human-friendly text alternative for the current value.
classNamestringNostyling—Additional CSS class names for custom styling.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.