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.
Min & Max values
You can set
max values of sliders.
You can add icons to the slider with the
prepend-icon props. With
@click:prepend you can trigger a callback function when click the icon.
You can use
vertical to switch sliders to a vertical orientation. If you need to change the height of the slider, use css.
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 slider
tick-labels prop along with a scoped slot, you can create a very customized solution.
Tick marks represent predetermined values to which the user can move the slider.
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.
Use slots such as
append to easily customize the
v-slider to fit any situation.