Slider

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

import Slider from "@ds-kit/slider"

Basic Example

50
0
100
Copy
<Slider my="3rem" />

Slider in play mode

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

In play mode without interpolation

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

Range slider

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

Range slider in play mode

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