Slider

Capture user feedback from a range of values

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

20%

50%

80%

Type

Default

Range

Color

Size

Radius

Show label on hover

Label always on

<Slider
  marks={[
    { value: 20, label: '20%' },
    { value: 50, label: '50%' },
    { value: 80, label: '80%' },
  ]}
/>

Controlled

By default, both Slider and RangeSlider are uncontrolled, add onChange and value props to make them controlled:

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

function Demo() {
  const [value, setValue] = useState(40);
  const [rangeValue, setRangeValue] = useState([20, 80]);

  return (
    <>
      <Slider value={value} onChange={setValue} />
      <RangeSlider value={rangeValue} onChange={setRangeValue} />
    </>
  );
}

Control label

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

label – formatter function, accepts value as an argument, set null to disable label, defaults to f => f
labelAlwaysOn – if true – label will always be displayed, by default label is visible only when user is dragging
labelTransition, labelTransitionDuration, labelTransitionTimingFunction – label uses Transition component to animate presence, you can choose any premade transition or create your own

No label

Formatted label

Label always visible

Custom label transition

// Disable label
<Slider label={null} />

// Format label with function
<Slider label={(value) => `${value} °C`} />

// Always display label
<Slider labelAlwaysOn />

// Change label transition
<Slider
  labelTransition="skew-down"
  labelTransitionDuration={150}
  labelTransitionTimingFunction="ease"
/>

Min, max and step

Decimal step

Step matched with marks

// Set min, max and step props to replace default values
<Slider
  defaultValue={5}
  min={-10}
  max={10}
  label={(value) => value.toFixed(1)}
  step={0.1}
  styles={{ markLabel: { display: 'none' } }}
/>

// Configure marks to match step
const MARKS = [
  { value: 0, label: 'xs' },
  { value: 25, label: 'sm' },
  { value: 50, label: 'md' },
  { value: 75, label: 'lg' },
  { value: 100, label: 'xl' },
];

<Slider
  label={(val) => MARKS.find((mark) => mark.value === val).label}
  defaultValue={50}
  step={25}
  marks={MARKS}
  styles={{ markLabel: { display: 'none' } }}
/>

Marks

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

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:

20%

50%

80%

20%

50%

80%

const marks = [
  { value: 20, label: '20%' },
  { value: 50, label: '50%' },
  { value: 80, label: '80%' },
];

<Slider defaultValue={40} marks={[{ value: 10 }, { value: 40 }, { value: 95 }]} />
<Slider defaultValue={40} marks={marks} />
<RangeSlider defaultValue={[20, 80]} marks={marks} />

Styles API

You can change styles of any element in slider component with Styles API to match your design requirements:

20%

50%

80%

<Slider
  defaultValue={40}
  marks={marks}
  labelTransition="fade"
  size={2}
  styles={(theme) =>({
    track: {
      backgroundColor:
        theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.blue[1],
    },
    mark: {
      width: 6,
      height: 6,
      borderRadius: 6,
      transform: 'translateX(-3px) translateY(-2px)',
      borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.blue[1],
    },
    markFilled: {
      borderColor: theme.colors.blue[6],
    },
    markLabel: { fontSize: theme.fontSizes.xs, marginBottom: 5, marginTop: 0 },
    thumb: {
      height: 16,
      width: 16,
      backgroundColor: theme.white,
      borderWidth: 1,
      boxShadow: theme.shadows.sm,
    },
  })}
/>

Accessibility and usability

Slider and RangeSlider components are accessible by default:

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

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

<Slider thumbLabel="Thumb aria-label" />
<RangeSlider thumbFromLabel="First thumb aria-label" thumbToLabel="Second thumb aria-label" />

Go back

Select – @mantine/core

Up next

Switch – @mantine/core

Build fully functional accessible web applications faster than ever

Project

Contribute to Mantine Media assets Changelog Releases

Community

Join Discord community Follow on Twitter Email newsletter GitHub discussions

Feedback

Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good

Leave feedback

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter