SliderUnstyled API

API documentation for the React SliderUnstyled component. Learn about the available props, and the CSS API.

Import

import SliderUnstyled from '@material-ui/unstyled/SliderUnstyled';
// 或
import { SliderUnstyled } from '@material-ui/unstyled';

You can learn about the difference by reading this guide on minimizing bundle size.

属性

名称	类型	默认值	描述
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 below for more details.
component	elementType		The component used for the root node. Either a string to use a HTML element or a component.
components	{ 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.
componentsProps	object	{}	The props used for each slot inside the Slider.
defaultValue	Array<number> \| number		The default input value. Use when the component is not controlled.
disabled	bool	false	如果被设置为 `true`，那么该组件将会被禁用。
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.
isRtl	bool	false	Indicates whether the theme context has rtl direction. It is set automatically.
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: object, value: number \\| number[]) => void` event: The event source of the callback. Warning: This is a generic event not a change event. 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. Warning: This is a generic event not a change event. value: The new value.
orientation	'horizontal' \| 'vertical'	'horizontal'	The divider 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.
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.
valueLabelDisplay	'auto' \| 'off' \| 'on'	'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	func \| string	(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

ref 则会被传递到根元素中。
Any other props supplied will be provided to the root element (native element).

CSS

Rule name	Global class	描述
root	.MuiSlider-root	Styles applied to the root element.
marked	.MuiSlider-marked	Class name applied to the root element if `marks` is provided with at least one label.
vertical	.MuiSlider-vertical	Class name 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	Class name applied to the rail element.
track	.MuiSlider-track	Class name applied to the track element.
trackFalse	.MuiSlider-trackFalse	Class name applied to the track element if `track={false}`.
trackInverted	.MuiSlider-trackInverted	Class name applied to the track element if `track="inverted"`.
thumb	.MuiSlider-thumb	Class name applied to the thumb element.
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	Class name applied to the thumb label element.
mark	.MuiSlider-mark	Class name applied to the mark element.
markActive	.MuiSlider-markActive	Class name applied to the mark element if active (depending on the value).
markLabel	.MuiSlider-markLabel	Class name applied to the mark label element.
markLabelActive	.MuiSlider-markLabelActive	Class name applied to the mark label element if active (depending on the value).

You can override the style of the component using one of these customization options:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.

Demos

Slider