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.