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

aria-labelledby

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

Type:

string

defaultValue

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

Type:

number | number[]

disabled

If true, the component is disabled.

Type:

boolean

Default:

false

disableSwap

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

Type:

boolean

Default:

false

isRtl

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

Type:

boolean

Default:

false

marks

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.

Type:

boolean | Mark[]

Default:

false

max

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

Type:

number

Default:

100

min

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

Type:

number

Default:

0

name

Name attribute of the hidden input element.

Type:

string

onChange

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

Type:

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

onChangeCommitted

Callback function that is fired when the mouseup is triggered.

Type:

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

orientation

The component orientation.

Type:

'horizontal' | 'vertical'

Default:

'horizontal'

rootRef

The ref attached to the root of the Slider.

Type:

React.Ref<Element>

scale

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

Type:

(value: number) => number

Default:

function Identity(x) {
return x;
}

step

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.

Type:

number | null

Default:

1

tabIndex

Tab index attribute of the hidden input element.

Type:

number

value

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

Type:

number | number[]

Return value

active

The active index of the slider.

Type:

number

axis

The orientation of the slider.

Type:

Axis

axisProps

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

Type:

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

dragging

If true, the slider is being dragged.

Type:

boolean

focusedThumbIndex

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

Type:

number

getHiddenInputProps

Resolver for the hidden input slot's props.

Type:

<TOther extends EventHandlers = {}>(otherHandlers?: TOther) => UseSliderHiddenInputProps<TOther>

getRootProps

Resolver for the root slot's props.

Type:

<TOther extends EventHandlers = {}>(otherHandlers?: TOther) => UseSliderRootSlotProps<TOther>

getThumbProps

Resolver for the thumb slot's props.

Type:

<TOther extends EventHandlers = {}>(otherHandlers?: TOther) => UseSliderThumbSlotProps<TOther>

getThumbStyle

Resolver for the thumb slot's style prop.

Type:

(index: number) => object

marks

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

Type:

Mark[]

open

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

Type:

number

range

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

Type:

boolean

rootRef

Ref to the root slot's DOM node.

Type:

React.RefCallback<Element> | null

trackLeap

The track leap for the current value of the slider.

Type:

number

trackOffset

The track offset for the current value of the slider.

Type:

number

values

The possible values of the slider.

Type:

number[]