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.
Slider
Quasar comes with a slider component to let users select a number from it.
To add it, we add the q-slider component:
<!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">
{{ standard }}
</q-badge>
<q-slider
v-model="standard"
:min="0"
:max="50"
color="green"
></q-slider>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
standard: 0
}
});
</script>
</body>
</html>
We add the q-slider component with the v-model directive to bind the selected value to the standard reactive property.
min has the min value allowed. max has the max value allowed.
The color prop changes the color of the slider button and the bar.
The vertical prop makes the slider vertical:
<!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 row justify-around">
{{ standard }}
<q-slider
v-model="standard"
:min="0"
:max="50"
color="green"
vertical
></q-slider>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
standard: 0
}
});
</script>
</body>
</html>
We can set the step that the slider snaps to with the step 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-badge color="secondary">
{{ model }}
</q-badge>
<q-slider v-model="model" :step="50"> </q-slider>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
model: 0
}
});
</script>
</body>
</html>
Now the slider will snap to the nearest increment of 50.
We can also round to the nearest floating-point number:
<!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 v-model="model" :min="0" :max="1.5" :step="0.1"> </q-slider>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
model: 0
}
});
</script>
</body>
</html>
We can show a label that displays the selected number with the label 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 v-model="model" :min="0" :max="1.5" :step="0.1">
</q-slider>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
model: 0
}
});
</script>
</body>
</html>
Conclusion
We can add a slider into our Vue app with Quasar’s q-slider component to let users pick a number.
