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.

  • Feedback
  • Bundle size
  • WAI-ARIA
Component demosComponents APIHooks API

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:<ExternalProps extends Record<string, unknown> = {}>(externalProps?: ExternalProps) => UseSliderHiddenInputProps<ExternalProps>


getRootProps

Resolver for the root slot's props.

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


getThumbProps

Resolver for the thumb slot's props.

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


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[]



Edit this page

Was this page helpful?


SelectSwitch

•

Blog

•

Store