Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Custom Label Value for a Slider
We can change the label value for the slider with the label-value prop:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-slider
label
:label-value="`${model}px`"
label-always
v-model="model"
:min="0"
:max="200"
>
</q-slider>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
model: 0
}
});
</script>
</body>
</html>
We can add the markers prop to add markers into the slider:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-slider markers v-model="model" :min="0" :max="200"> </q-slider>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
model: 0
}
});
</script>
</body>
</html>
We can also add the snap prop with the markers prop to snap to a marker:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-slider markers snap v-model="model" :min="0" :max="200">
</q-slider>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
model: 0
}
});
</script>
</body>
</html>
We can set the model value to change only when we lift the mouse button by attaching a change listener:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-badge color="secondary">
{{ model }}
</q-badge>
<q-slider
:value="model"
@change="val => { model = val }"
:min="0"
:max="45"
:step="5"
color="purple"
label
>
</q-slider>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
model: 0
}
});
</script>
</body>
</html>
We get the val parameter which has the selected value and then set its value to the model reactive property.
And we set the value prop to model to display the value on the slider.
The change event is only emitted when we lift the mouse button, so the model value won’t change as often.
Conclusion
We can set various options of a slider with the Quasar q-slider component.
