Slider control allows users to select a specific value or a range of values from a set. Usually, slider presents a relatively large dataset and the way that the user interacts with it is helpful to explore the multiple options swiftly.
Name | Default | Description |
---|---|---|
defaultValue: number | Initial value of the slider, only when it is uncontrolled. | |
value: number | The selected value. If undefined, the component will be uncontrolled and the value will be managed internally by the component. | |
label: string | Text to be placed above the slider. | |
name: string | Name attribute of the input element. | |
helperText: string | Helper text to be placed above the slider. | |
minValue: number | 0 | The minimum value available for selection. |
maxValue: number | 100 | The maximum value available for selection. |
step: number | 1 | The step interval between values available for selection. |
showLimitsValues: boolean | false | Whether the min/max value labels should be displayed next to the slider. |
showInput: boolean | false | Whether the input element for displaying/controlling the slider value should be displayed next to the slider. |
disabled: boolean | false | If true, the component will be disabled. |
marks: boolean | false | Whether the marks between each step should be shown or not. |
onChange: function | This function will be called when the slider changes its value, as it's being dragged. The new value will be passed as a parameter when this function is executed. | |
onDragEnd: function | This function will be called when the slider changes its value, but only when the thumb is released. The new value will be passed as a parameter when this function is executed. | |
labelFormatCallback: function | This function will be used to format the labels displayed next to the slider. The value will be passed as parameter and the function must return the formatted value. | |
margin: string | object | Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. | |
size: string | 'fillParent' | Size of the component ('medium' | 'large' | 'fillParent'). |
tabIndex: number | 0 | Value of the tabindex attribute. |
ref: object | New Reference to the component. |