Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Inverse Slider Label
We can add the inverse-label prop to display labels at the end of it:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-slider inverse-label label="Inverse label" value="30"></v-slider>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({}),
};
</script>
Custom Range slider
The tick-labels prop lets us add tick labels to the slider.
For instance, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-range-slider
:tick-labels="seasons"
:value="[0, 1]"
min="0"
max="3"
ticks="always"
tick-size="4"
>
<template v-slot:thumb-label="props">
<v-icon dark>{{ season(props.value) }}</v-icon>
</template>
</v-range-slider>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
seasons: ["Winter", "Spring", "Summer", "Fall"],
value: undefined,
icons: ["mdi-snowflake", "mdi-leaf", "mdi-fire", "mdi-water"],
}),
methods: {
season(val) {
return this.icons[val];
},
},
};
</script>
We have the tick-labels prop lets us set the labels for the range slider.
Also, we have the ticks and ticks-size prop to show the number of ticks we want.
ticks set to always means that the ticks will be displayed.
Custom Color
We can change the color of the track and thumb with the track-color and thumb-color respectively.
For example, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-slider v-model="ex1.val" :label="ex1.label" :track-color="ex1.color"></v-slider>
<v-slider
v-model="ex2.val"
:label="ex2.label"
:thumb-color="ex2.color"
thumb-label="always"
></v-slider>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
ex1: { label: "track-color", val: 75, color: "green" },
ex2: { label: "thumb-color", val: 50, color: "red" },
}),
};
</script>
The track color is the color to the right of the dot.
Thumb color is the color of the dot.
Range
We can add a range slid with the v-range-slider component.
The range slider has 2 dots to set the min and max values.
For example, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-range-slider v-model="value"></v-range-slider>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
value: [30, 60],
}),
};
</script>
We have the value array to use as the value for v-model .
The first value is the min value and the 2nd is the max.
Validation
We can validate slider values with the rules prop.
For instance, we can write:
<template>
<v-container>
<v-row>
<v-col col="12">
<v-slider
v-model="value"
:rules="rules"
label="How many?"
step="10"
thumb-label="always"
ticks
></v-slider>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
value: 30,
rules: [(v) => v <= 50 || "Can't have more than 50"],
}),
};
</script>
to add validation rules for the slider.
The rules is an array of functions with the validation rules.
v is the value of the slider.
And if the value isn’t valid, then an error message is returned.
Conclusion
We can add validation rules to sliders with Vuetify.
