--- filename: /packages/material-ui/src/Slider/Slider.js --- # Slider API

The API documentation of the Slider React component. Learn more about the props and the CSS customization points.

## Import ```js import Slider from '@material-ui/core/Slider'; // or import { Slider } from '@material-ui/core'; ``` You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). ## Component name The `MuiSlider` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. ## Props | 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. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | color | 'primary'
| 'secondary' | 'primary' | The color of the component. It supports those theme colors that make sense for this component. | | component | elementType | 'span' | The component used for the root node. Either a string to use a HTML element or a component. | | defaultValue | number
| Array<number> | | The default element value. Use when the component is not controlled. | | disabled | bool | false | If `true`, the slider will be disabled. | | getAriaLabel | func | | Accepts a function which returns a string value that provides a user-friendly name for the thumb labels of the slider.

**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.

**Signature:**
`function(value: number, index: number) => string`
*value:* The thumb label's value to format.
*index:* The thumb label's index to format. | | marks | bool
| array | false | Marks indicate predetermined values to which the user can move the slider. If `true` the marks will be 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: object, value: number \| number[]) => void`
*event:* The event source of the callback.
*value:* The new value. | | onChangeCommitted | func | | Callback function that is fired when the `mouseup` is triggered.

**Signature:**
`function(event: object, value: number \| number[]) => void`
*event:* The event source of the callback.
*value:* The new value. | | orientation | 'horizontal'
| 'vertical' | 'horizontal' | The slider orientation. | | scale | func | (x) => x | A transformation function, to change the scale of the slider. | | 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. | | ThumbComponent | elementType | 'span' | The component used to display the value label. | | track | 'normal'
| false
| 'inverted' | '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 | number
| Array<number> | | The value of the slider. For ranged sliders, provide an array with two values. | | ValueLabelComponent | elementType | ValueLabel | The value label component. | | valueLabelDisplay | 'on'
| 'auto'
| 'off' | 'off' | Controls when the value label is displayed:
- `auto` the value label will display when the thumb is hovered or focused. - `on` will display persistently. - `off` will never display. | | valueLabelFormat | string
| func | (x) => 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. Any other props supplied will be provided to the root element (native element). ## CSS | Rule name | Global class | Description | |:-----|:-------------|:------------| | root | .MuiSlider-root | Styles applied to the root element. | colorPrimary | .MuiSlider-colorPrimary | Styles applied to the root element if `color="primary"`. | colorSecondary | .MuiSlider-colorSecondary | Styles applied to the root element if `color="secondary"`. | marked | .MuiSlider-marked | Styles applied to the root element if `marks` is provided with at least one label. | vertical | .MuiSlider-vertical | Pseudo-class applied to the root element if `orientation="vertical"`. | disabled | .Mui-disabled | Pseudo-class applied to the root and thumb element if `disabled={true}`. | rail | .MuiSlider-rail | Styles applied to the rail element. | track | .MuiSlider-track | Styles applied to the track element. | trackFalse | .MuiSlider-trackFalse | Styles applied to the track element if `track={false}`. | trackInverted | .MuiSlider-trackInverted | Styles applied to the track element if `track="inverted"`. | thumb | .MuiSlider-thumb | Styles applied to the thumb element. | thumbColorPrimary | .MuiSlider-thumbColorPrimary | Styles applied to the thumb element if `color="primary"`. | thumbColorSecondary | .MuiSlider-thumbColorSecondary | Styles applied to the thumb element if `color="secondary"`. | active | .MuiSlider-active | Pseudo-class applied to the thumb element if it's active. | focusVisible | .Mui-focusVisible | Pseudo-class applied to the thumb element if keyboard focused. | valueLabel | .MuiSlider-valueLabel | Styles applied to the thumb label element. | mark | .MuiSlider-mark | Styles applied to the mark element. | markActive | .MuiSlider-markActive | Styles applied to the mark element if active (depending on the value). | markLabel | .MuiSlider-markLabel | Styles applied to the mark label element. | markLabelActive | .MuiSlider-markLabelActive | Styles applied to the mark label element if active (depending on the value). You can override the style of the component thanks to one of these customization points: - With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). - With a [global class name](/customization/components/#overriding-styles-with-global-class-names). - With a theme and an [`overrides` property](/customization/globals/#css). If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Slider/Slider.js) for more detail. ## Demos - [Slider](/components/slider/)