Ark UI

Import

import {
  RangeSlider,
  RangeSliderControl,
  RangeSliderLabel,
  RangeSliderMarker,
  RangeSliderMarkerGroup,
  RangeSliderOutput,
  RangeSliderRange,
  RangeSliderThumb,
  RangeSliderTrack,
} from '@ark-ui/react'

Usage

The Range Slider component consists of the RangeSliderControl, RangeSliderLabel, RangeSliderMarker, RangeSliderMarkerGroup, RangeSliderOutput, RangeSliderRange, RangeSliderThumb and RangeSliderTrack components. Combine them as desired to fit your design system.

<RangeSlider>
  <RangeSliderLabel>Label</RangeSliderLabel>
  <RangeSliderControl>
    <RangeSliderTrack>
      <RangeSliderRange />
    </RangeSliderTrack>
    <RangeSliderThumb index={0} />
    <RangeSliderThumb index={1} />
  </RangeSliderControl>
</RangeSlider>

Specifying the minimum and maximum

By default, the minimum is 0 and the maximum is 100. If that’s not what you want, you can easily specify different bounds by changing the values of the min and/or max props.

For example, to ask the user for a value between -10 and 10, you can use:

<RangeSlider min={-10} max={10}>
  {/*...*/}
</RangeSlider>

Setting the value’s granularity

By default, the granularity, is 1, meaning that the value is always an integer. You can change the step attribute to control the granularity.

For example, If you need a value between 5 and 10, accurate to two decimal places, you should set the value of step to 0.01:

<RangeSlider step={0.01} min={5} max={10}>
  {/*...*/}
</RangeSlider>

Preventing thumb overlap

By default, the range slider thumbs are allowed to overlap when their values are equal. To prevent this, set the prop minStepsBetweenThumbs to avoid thumbs with equal values.

<RangeSlider minStepsBetweenThumbs={1}>{/*...*/}</RangeSlider>

Listening for changes

When the slider value changes, the onChange and onChangeEnd callbacks are invoked. You can use this to setup custom behaviors in your app.

<RangeSlider
  onChange={(value) => console.log(value)}
  onChangeEnd={(value) => console.log(value)}
>
  {/*...*/}
</RangeSlider>

Changing the orientation

By default, the slider is assumed to be horizontal. To change the orientation to vertical, set the orientation property in the machine’s context to vertical.

In this mode, the slider will use the arrow up and down keys to increment/decrement its value.

Don’t forget to change the styles of the vertical slider by specifying its height

<RangeSlider orientation="vertical">{/*...*/}</RangeSlider>