Developing Vue Apps with the Quasar Library

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.

#web-development #javascript #programming #technology

Slider

medium.com

Developing Vue Apps with the Quasar Library — Slider