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.

Slots

To learn how to customize the slot, check out the Overriding component structure guide.

Slot name	Class name	Default component	Description
root	.base-Slider-root	`'span'`	The component that renders the root.
track	.base-Slider-track	`'span'`	The component that renders the track.
rail	.base-Slider-rail	`'span'`	The component that renders the rail.
thumb	.base-Slider-thumb	`'span'`	The component that renders the thumb.
mark	.base-Slider-mark	`'span'`	The component that renders the mark.
markLabel	.base-Slider-markLabel	`'span'`	The component that renders the mark label.
valueLabel			The component that renders the value label.
input		`'input'`	The component that renders the input.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class name	Description
.base--active	State class applied to the thumb element if it's active.
.base--disabled	State class applied to the root and thumb element if `disabled={true}`.
.base--focusVisible	State class applied to the thumb element if keyboard focused.
.base-Slider-dragging	State class applied to the root if a thumb is being dragged.
.base-Slider-markActive	Class name applied to the mark element if active (depending on the value).
.base-Slider-marked	Class name applied to the root element if `marks` is provided with at least one label.
.base-Slider-markLabelActive	Class name applied to the mark label element if active (depending on the value).
.base-Slider-trackFalse	Class name applied to the root element if `track={false}`.
.base-Slider-trackInverted	Class name applied to the root element if `track="inverted"`.
.base-Slider-vertical	Class name applied to the root element if `orientation="vertical"`.