Range Slider
The Range Slider component is a better visualization of the number input. It is used for gathering numerical user data.
info
For more details about Vuetify’s usage of Range Slider component, click Range Slider page.
For more prop explanations, click Vuetify Range Slider API page.
Props
| Attribute | Description | Type | Default |
|---|---|---|---|
| appendIcon | Appends an icon to the component, uses the same syntax as Icon. | string | undefined |
| backgroundColor | Changes the background-color of the input. | string | undefined |
| class | Allows custom properties to take effect. | string | undefined |
| color | Sets the color of the line between Slider's dots. | string | undefined |
| dark | Applies the dark theme . | boolean | false |
| dense | Reduces the input height. | boolean | false |
| disabled | Disable the input. | boolean | false |
| height | Sets the height of the input. | number-string | undefined |
| hideDetails | Hides hint and validation errors. | string | undefined |
| hint | Hint text. | string | undefined |
| id | Sets the DOM id on the component. | string | undefined |
| inverseLabel | Reverse the label position. Works with rtl. | boolean | false |
| label | Sets input label. | string | undefined |
| loaderHeight | Specifies the height of the loader. | number-string | 2 |
| loading | Displays linear progress bar. | boolean | false |
| persistentHint | Forces hint to always be visible. | boolean | false |
| prependIcon | Prepends an icon to the component, uses the same syntax as Icon. | string | undefined |
| readonly | Puts input in readonly state. | boolean | false |
| thumbColor | Sets the thumb and thumb label color . | string | undefined |
| thumbLabel | Show thumb label. If true it shows label when using slider. If set to 'always' it always shows label. | string | undefined |
| tickSize | Controls the size of ticks. | number-string | 2 |
| trackColor | Sets the track’s color. | string | undefined |
| trackFillColor | Sets the track’s fill color. | string | undefined |
| error | Puts the input in a manual error state. | boolean | false |
| errorCount | The total number of errors that should display at once. | number-string | 1 |
| errorMessage | Puts the input in an error state and passes through custom error messages. | string-array | undefined |
| max | Sets the maximum allowed value. | number | 100 |
| min | Sets the minimum allowed value. | number | 0 |
| success | Puts the input in a manual success state. | boolean | false |
| successMessage | Puts the input in a success state and passes through custom success messages. | string-array | undefined |
| step | If greater than 0, sets step interval for ticks. | number | 1 |
| prependInnerIcon | Prepends an icon inside the component’s input, uses the same syntax as Icon. | string | undefined |
| thumbSize | Controls the size of the thumb label. | number-string | 32 |
| tickLabels | When provided with Array, will attempt to map the labels to each step in index order. | array | [] |
| ticks | Show track ticks. If true it shows ticks when using slider. If set to 'always' it always shows ticks. | boolean-string | false |
| rules | Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) false or is a string. | array | [] |
| validateOnBlur | Delays validation until blur. event. | boolean | false |
| vertical | Changes slider direction to vertical. | boolean | false |
| tabindex | Allows component to give and receive focus. | number | undefined |
| value | Sets Slider's value. | number-array | [30,60] |
| visible | Visibility of ProgressLinear component. | boolean | true |
Events
| Attribute | Description |
|---|---|
| change(value: any[]) | Emitted when the input is changed by user interaction |
| input(value: any[]) | The updated bound model |