Skip to content
+

Slider

A slider is a UI element that lets users select a single value or a range of values along a bar.

useSlider API

Import

import { useSlider } from '@mui/base/useSlider';
// or
import { useSlider } from '@mui/base';
Learn about the difference by reading this guide on minimizing bundle size.

Parameters

NameTypeDefaultDescription
aria-labelledbystring-

The id of the element containing a label for the slider.

defaultValuenumber | ReadonlyArray<number>-

The default value. Use when the component is not controlled.

disabledbooleanfalse

If true, the component is disabled.

disableSwapbooleanfalse

If true, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb.

isRtlbooleanfalse

If true the Slider will be rendered right-to-left (with the lowest value on the right-hand side).

marksboolean | ReadonlyArray<Mark>false

Marks indicate predetermined values to which the user can move the slider. If true the marks are spaced according the value of the step prop. If an array, it should contain objects with value and an optional label keys.

maxnumber100

The maximum allowed value of the slider. Should not be equal to min.

minnumber0

The minimum allowed value of the slider. Should not be equal to max.

namestring-

Name attribute of the hidden input element.

onChange(event: Event, value: number | number[], activeThumb: number) => void-

Callback function that is fired when the slider's value changed.

onChangeCommitted(event: React.SyntheticEvent | Event, value: number | number[]) => void-

Callback function that is fired when the mouseup is triggered.

orientation'horizontal' | 'vertical''horizontal'

The component orientation.

rootRefReact.Ref<Element>-

The ref attached to the root of the Slider.

scale(value: number) => numberfunction Identity(x) { return x; }

A transformation function, to change the scale of the slider.

shiftStepnumber10

The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.

stepnumber | null1

The granularity with which the slider can step through values. (A "discrete" slider.) The min prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.
When step is null, the thumb can only be slid onto marks provided with the marks prop.

tabIndexnumber-

Tab index attribute of the hidden input element.

valuenumber | ReadonlyArray<number>-

The value of the slider. For ranged sliders, provide an array with two values.

Return value

NameTypeDescription
activenumber

The active index of the slider.

axisAxis

The orientation of the slider.

axisProps{ [key in Axis]: AxisProps<key> }

Returns the offset and leap methods to calculate the positioning styles based on the slider axis.

draggingboolean

If true, the slider is being dragged.

focusedThumbIndexnumber

The index of the thumb which is focused on the slider.

getHiddenInputProps<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSliderHiddenInputProps<ExternalProps>

Resolver for the hidden input slot's props.

getRootProps<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSliderRootSlotProps<ExternalProps>

Resolver for the root slot's props.

getThumbProps<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSliderThumbSlotProps<ExternalProps>

Resolver for the thumb slot's props.

getThumbStyle(index: number) => object

Resolver for the thumb slot's style prop.

marksMark[]

The marks of the slider. Marks indicate predetermined values to which the user can move the slider.

opennumber

The thumb index for the current value when in hover state.

rangeboolean

If true, the slider is a range slider when the value prop passed is an array.

rootRefReact.RefCallback<Element> | null

Ref to the root slot's DOM node.

trackLeapnumber

The track leap for the current value of the slider.

trackOffsetnumber

The track offset for the current value of the slider.

valuesnumber[]

The possible values of the slider.