Slider

The Slider component allows the user to select one value from a range of values along a bar. They are ideal for adjusting volume, brightness, and image filter settings.

The Slider component is used independently or as a form component within a Form Block.

Properties

Name	Type	Default	Description
name	string		Specifies the name of the component (form component only).
label	node		Specifies a label for the component.
ariaLabel	string		Specifies a label for the slider.
ariaLabeledBy	string		Specifies the id of the element that contains the slider label.
ariaValueText	string		Defines a string value for the current value of the slider.
value	number		Defines the value of the slider. A ranged slider requires an array of two values.
min	number	0	Specifies the minimum value of the slider. The minimum value should not equal the maximum value.
max	number	100	Specifies the maximum value of the slider. The maximum value should not equal the minimum value.
defaultValue	any		Specifies a default value for the component.
scale	func		Defines a transformation function to change the scale of the slider.
step	number	1	Defines the granularity with which the slider can step through values. The minimum prop is the origin point for valid values. If the step is *null*, the thumb will use values provided by the marks prop.
getAriaLabel	func		Accepts a function that returns a string value for the thumb labels of the slider.
getAriaValueText	func		Accepts a function that returns a string value for the current value of the slider.
classes	object		Accepts a function that returns a string value for the current value of the slider.
marks	bool	false	If true, marks will display on the slider for each unique step. Custom marks can be displayed using an array of value/label keys
disableSwap	bool	false	If true, prevents the current thumb from swapping when dragging it over another thumb.
disabled	bool	false	If true, the slider is disabled.

Style Attributes

Name	Type	Default	Description
color	primary secondary error info success warning string	primary	Defines the color of the component.
size	small medium string	medium	Defines the size of the component.
labelPlacement	top bottom start end string	end	Specifies the placement of the component label.
track	normal inverted false string	false	Defines how the track for the slider displays.
valueLabelDisplayed	auto on off string	off	Specifies whether the value label displays.
orientation	horizontal vertical string	horizontal	Defines the orientation of the component.
tabIndex	number		Specifies the tab index of a hidden input element.
valueLabelFormat	func		A function to specify the format of the value label's value.
sx	array		Specifies custom CSS styles for the slider.

For more detail on the Slider component, see the MUI developer docs.