The 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.
Select your desired component from below and see the available props, slots, events and functions.
Below is a collection of simple to complex examples.
You can set min and max values of sliders.
You cannot interact with disabled sliders.
You cannot interact with readonly sliders, but they look as ordinary ones.
You can add icons to the slider with the append-icon and prepend-icon props. With @click:append and @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 can have a custom color by setting thumb-color and a custom size with thumb-size. With always-dirty its color will never change, even when on min value.
v-slider with inverse-label property displays label at the end of it.
Using the tick-labels prop along with slots, 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 color, track-color and thumb-color.
Range sliders.
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 prepend and append to easily customize the v-slider to fit any situation.
Ready for more? Continue reading with: