Slider

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

Slider API

Import

import { Slider } from '@mui/base/Slider';
// or
import { Slider } from '@mui/base';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

Name	Type	Default	Description
aria-label	string	-	The label of the slider.
aria-labelledby	string	-	The id of the element containing a label for the slider.
aria-valuetext	string	-	A string value that provides a user-friendly name for the current value of the slider.
defaultValue	Array<number> \| number	-	The default value. Use when the component is not controlled.
disabled	bool	false	If `true`, the component is disabled.
disableSwap	bool	false	If `true`, the active thumb doesn't swap when moving pointer over a thumb while dragging another thumb.
getAriaLabel	func	-	Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider. This is important for screen reader users. Signature:`function(index: number) => string` `index` The thumb label's index to format.
getAriaValueText	func	-	Accepts a function which returns a string value that provides a user-friendly name for the current value of the slider. This is important for screen reader users. Signature:`function(value: number, index: number) => string` `value` The thumb label's value to format. `index` The thumb label's index to format.
isRtl	bool	false	If `true` the Slider will be rendered right-to-left (with the lowest value on the right-hand side).
marks	Array<{ label?: node, value: number }> \| bool	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.
max	number	100	The maximum allowed value of the slider. Should not be equal to min.
min	number	0	The minimum allowed value of the slider. Should not be equal to max.
name	string	-	Name attribute of the hidden `input` element.
onChange	func	-	Callback function that is fired when the slider's value changed. Signature:`function(event: Event, value: number \| Array, activeThumb: number) => void` `event` The event source of the callback. You can pull out the new value by accessing `event.target.value` (any). Warning: This is a generic event not a change event. `value` The new value. `activeThumb` Index of the currently moved thumb.
onChangeCommitted	func	-	Callback function that is fired when the `mouseup` is triggered. Signature:`function(event: React.SyntheticEvent \| Event, value: number \| Array) => void` `event` The event source of the callback. Warning: This is a generic event not a change event. `value` The new value.
orientation	'horizontal' \| 'vertical'	'horizontal'	The component orientation.
scale	func	function Identity(x) { return x; }	A transformation function, to change the scale of the slider. Signature:`function(x: any) => any`
shiftStep	number	10	The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.
slotProps	{ input?: func \| object, mark?: func \| object, markLabel?: func \| object, rail?: func \| object, root?: func \| object, thumb?: func \| object, track?: func \| object, valueLabel?: any \| func }	{}	The props used for each slot inside the Slider.
slots	{ input?: elementType, mark?: elementType, markLabel?: elementType, rail?: elementType, root?: elementType, thumb?: elementType, track?: elementType, valueLabel?: elementType }	{}	The components used for each slot inside the Slider. Either a string to use a HTML element or a component. See Slots API below for more details.
step	number	1	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.
tabIndex	number	-	Tab index attribute of the hidden `input` element.
track	'inverted' \| 'normal' \| false	'normal'	The track presentation: `normal` the track will render a bar representing the slider value. `inverted` the track will render a bar representing the remaining slider value. `false` the track will render without a bar.
value	Array<number> \| number	-	The value of the slider. For ranged sliders, provide an array with two values.
valueLabelFormat	func \| string	function Identity(x) { return x; }	The format function the value label's value. When a function is provided, it should have the following signature: - {number} value The value label's value to format - {number} index The value label's index to format

The ref is forwarded to the root element.