title: "Slider" slug: "/packages/slider" category: "control" componentNames:

• "Slider"

Slider

The Slider allows users to select a specific value, or a range between two values.

import Slider from "@ds-kit/slider"

Basic Example

<Slider my="3rem" />

Slider in play mode

<Slider playMode duration={100} my="3rem" />

In play mode without interpolation

<Slider
  value={0}
  customDomain={[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]}
  interpolate={false}
  playMode
  duration={1000}
  my="3rem"
/>

Range slider

<Slider value={[4, 6]} min={0} max={10} my="3rem" />

Range slider in play mode

<Slider
  value={[4, 6]}
  min={0}
  max={10}
  playMode
  interpolate={false}
  duration={1000}
  my="3rem"
/>