Range Slider - Mantine

import { RangeSliderDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.RangeSlider);

Usage

Controlled

tsx

import { useState } from 'react';
import { RangeSlider } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState<[number, number]>([20, 80]);
  return <RangeSlider value={value} onChange={setValue} />;
}

Uncontrolled

RangeSlider can be used with uncontrolled forms the same way as a native input element. Set the name attribute to include range slider value in FormData object on form submission. To control the initial value in uncontrolled forms, use the defaultValue prop.

Example usage of uncontrolled RangeSlider with FormData:

tsx

import { RangeSlider } from '@mantine/core';

function Demo() {
  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        const formData = new FormData(event.currentTarget);
        console.log('Range slider value:', formData.get('range'));
      }}
    >
      <RangeSlider
        name="range"
        defaultValue={[20, 80]}
        min={0}
        max={100}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Disabled

Control label

To change the label behavior and appearance, set the following props:

label – formatter function, accepts value as an argument, set to null to disable the label, defaults to f => f
labelAlwaysOn – if true, the label will always be displayed; by default the label is visible only when the user is dragging
labelTransitionProps – props passed down to the Transition component, can be used to customize the label animation

Min, max and step

Domain

By default, min and max values define the possible range of values. The domain prop allows setting the possible range of values independently of the min and max values:

Decimal values

To use RangeSlider with decimal values, set the min, max, and step props:

minRange

Use the minRange prop to control the minimum range between from and to values in RangeSlider. The default value is 10. This ensures the thumbs must be at least the specified distance apart:

maxRange

Use the maxRange prop to control the maximum range between from and to values. This limits how wide the selection can be. By default, maxRange is set to Infinity:

pushOnOverlap

The pushOnOverlap prop controls whether the thumbs should push each other when they overlap. By default, pushOnOverlap is true. If you want to disable this behavior, set it to false.

Example of pushOnOverlap={false}:

Marks

Add any number of marks to the slider by setting the marks prop to an array of objects:

tsx

const marks = [
  { value: 20 }, // -> displays mark on slider track
  { value: 40, label: '40%' }, // -> adds mark label below slider track
];

Note that mark value is relative to slider value, not width:

Restrict selection to marks

Set restrictToMarks prop to restrict slider value to marks only. Note that in this case step prop is ignored:

Inverted

You can invert the track with the inverted prop:

Hidden marks

Hidden marks allow you to snap to specific values without displaying them visually on the track. This is useful when you want to create a "sticky" snapping behavior to certain values that you don't want to show to the user. Use this feature together with restrictToMarks prop:

Accessibility

RangeSlider component is accessible by default:

Thumbs are focusable
When the user uses mouse to interact with the slider, focus is moved to the slider track, when the user presses arrows focus is moved to the thumb
Value can be changed with arrows with step increment/decrement

To label component for screen readers, add labels to thumbs:

tsx

import { RangeSlider } from '@mantine/core';

function Demo() {
  return (
    <RangeSlider
      thumbFromLabel="First thumb aria-label"
      thumbToLabel="Second thumb aria-label"
    />
  );
}

Keyboard interactions