Skip to main content

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. To use it as a form component, place it within a Form Block.

Properties

NameTypeDefaultDescription
namestringSpecifies the name of the component (form component only).
labelnodeSpecifies a label for the component.
ariaLabelstringSpecifies a label for the slider.
ariaLabeledBystringSpecifies the id of the element that contains the slider label.
ariaValueTextstringDefines a string value for the current value of the slider.
valuenumberDefines the value of the slider. A ranged slider requires an array of two values.
minnumber0Specifies the minimum value of the slider. The minimum value should not equal the maximum value.
maxnumber100Specifies the maximum value of the slider. The maximum value should not equal the minimum value.
defaultValueanySpecifies a default value for the component.
scalefuncDefines a transformation function to change the scale of the slider.
stepnumber1Defines 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.
getAriaLabelfuncAccepts a function that returns a string value for the thumb labels of the slider.
getAriaValueTextfuncAccepts a function that returns a string value for the current value of the slider.
classesobjectAccepts a function that returns a string value for the current value of the slider.
marksboolfalseIf true, marks will display on the slider for each unique step. Custom marks can be displayed using an array of value/label keys
disableSwapboolfalseIf true, prevents the current thumb from swapping when dragging it over another thumb.
disabledboolfalseIf true, the slider is disabled.

Style Attributes

NameTypeDefaultDescription
colorprimary
secondary
error
info
success
warning
string
primaryDefines the color of the component.
sizesmall
medium
string
mediumDefines the size of the component.
labelPlacementtop
bottom
start
end
string
endSpecifies the placement of the component label.
tracknormal
inverted
false
string
falseDefines how the track for the slider displays.
valueLabelDisplayedauto
on
off
string
offSpecifies whether the value label displays.
orientationhorizontal
vertical
string
horizontalDefines the orientation of the component.
tabIndexnumberSpecifies the tab index of a hidden input element.
valueLabelFormatfuncA function to specify the format of the value label's value.
sxarraySpecifies custom CSS styles for the slider.

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

on this page
Was this article useful?
89% of our users said this content was useful.