v-slider component is a better visualization of the number input. It is used for gathering numerical user data.
Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.
You can display a
thumb-label while sliding or always. It It can have a custom color by setting
thumb-color and a custom size with
always-dirty its color will never change, even when on
Custom Range sliderNew in v1.1
tick-labels prop along with a scoped slot, you can create a very customized solution.
TicksNew in v1.1
Tick marks represent predetermined values to which the user can move the slider.
Discrete sliders offer a thumb label that displays the exact current amount. Using the
step prop you can disallow selecting values outside of steps.
You can add icons to the slider with the
prepend-icon props. With
prepend-icon-cb you can trigger a callback function when click the icon.
With an editable numeric value
Sliders can be combined with other components for a better display.
You can set the colors of the slider using the props
Vuetify includes simple validation through the
rules prop. The prop accepts an array of callbacks. While validating rules, the current v-model value will be passed to the callback. This callback should return either
true or a
String, the error message.
RangeNew in v1.1
Min & Max values
You can set
max values of sliders.