Category: Quasar

Quasar

Developing Vue Apps with the Quasar Library — Drag Range and Time Picker

Post author By John Au-Yeung
Post date December 6, 2020
No Comments on Developing Vue Apps with the Quasar Library — Drag Range and Time Picker

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.

Range Slider — Drag Range

We can let users drag the range of the range slider with the drag-range 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.min }} to {{ model.max }}  
          </q-badge>  
          <div class="row justify-around">  
            <q-range  
              v-model="model"  
              :min="0"  
              :max="50"  
              :step="0.5"  
              color="green"  
              drag-range  
            >  
            </q-range>  
          </div>  
        </div>  
      </q-layout>  
    </div>  
    <script>  
      new Vue({  
        el: "#q-app",  
        data: {  
          model: {  
            min: 0,  
            max: 50  
          }  
        }  
      });  
    </script>  
  </body>  
</html>

Time Picker

We can add a time picker with the q-time 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-time v-model="timeWithSeconds" with-seconds> </q-time>  
        </div>  
      </q-layout>  
    </div>  
    <script>  
      new Vue({  
        el: "#q-app",  
        data: {  
          timeWithSeconds: undefined  
        }  
      });  
    </script>  
  </body>  
</html>

The with-seconds prop lets the user pick the seconds portion of the time.

The landscape prop puts the selected time to the left of the clock:

<!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-time v-model="timeWithSeconds" landscape> </q-time>  
        </div>  
      </q-layout>  
    </div>  
    <script>  
      new Vue({  
        el: "#q-app",  
        data: {  
          timeWithSeconds: undefined  
        }  
      });  
    </script>  
  </body>  
</html>

The format24h lets us set the time in 24-hour format:

<!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-time v-model="timeWithSeconds" format24h> </q-time>  
        </div>  
      </q-layout>  
    </div>  
    <script>  
      new Vue({  
        el: "#q-app",  
        data: {  
          timeWithSeconds: undefined  
        }  
      });  
    </script>  
  </body>  
</html>

The now-btn prop lets us add a button to let the user select the current time:

<!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-time v-model="timeWithSeconds" now-btn> </q-time>  
        </div>  
      </q-layout>  
    </div>  
    <script>  
      new Vue({  
        el: "#q-app",  
        data: {  
          timeWithSeconds: undefined  
        }  
      });  
    </script>  
  </body>  
</html>

Conclusion

We can add a time picker into our Vue app with Quasar.

Also, we can let users drag the selected range of the range slider.

Quasar

Developing Vue Apps with the Quasar Library — Range Slider Steps and Labels

Post author By John Au-Yeung
Post date December 6, 2020
No Comments on Developing Vue Apps with the Quasar Library — Range Slider Steps and Labels

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.

Range Slider Steps

We can add the snap prop to make the range slider snap to steps:

<!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.min }} to {{ standard.max }}
          </q-badge>
          <div class="row justify-around">
            <q-range
              v-model="standard"
              :min="0"
              :max="50"
              :step="0.5"
              color="green"
              snap
            >
            </q-range>
          </div>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          standard: {
            min: 0,
            max: 50
          }
        }
      });
    </script>
  </body>
</html>

Range Slider Labels

We can add range slider labels to show the selected range.

To do this, we write:

<!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.min }} to {{ standard.max }}
          </q-badge>
          <div class="row justify-around">
            <q-range
              v-model="standard"
              :min="0"
              :max="50"
              :step="0.5"
              color="green"
              label
            >
            </q-range>
          </div>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          standard: {
            min: 0,
            max: 50
          }
        }
      });
    </script>
  </body>
</html>

to add the label prop.

The label-always prop make the range labels always display:

<!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.min }} to {{ standard.max }}
          </q-badge>
          <div class="row justify-around">
            <q-range
              v-model="standard"
              :min="0"
              :max="50"
              :step="0.5"
              color="green"
              label-always
            >
            </q-range>
          </div>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          standard: {
            min: 0,
            max: 50
          }
        }
      });
    </script>
  </body>
</html>

We can change the label text with the left-label-value and right-labe-value props:

<!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.min }} to {{ model.max }}
          </q-badge>
          <div class="row justify-around">
            <q-range
              v-model="model"
              :min="0"
              :max="50"
              :step="0.5"
              color="green"
              :left-label-value="`${model.min }px`"
              :right-label-value="`${model.max }px`"
              label-always
            >
            </q-range>
          </div>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          model: {
            min: 0,
            max: 50
          }
        }
      });
    </script>
  </body>
</html>

Conclusion

We can set various options to change how the range slider is rendered with Quasar.

Quasar

Developing Vue Apps with the Quasar Library — Range Slider

Post author By John Au-Yeung
Post date December 5, 2020
No Comments on Developing Vue Apps with the Quasar Library — Range Slider

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.

Range Slider

Quasar comes with a range slider.

To add it, we add the q-range 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.min }} to {{ standard.max }}
          </q-badge>

          <q-range v-model="standard" :min="0" :max="50" color="green">
          </q-range>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          standard: {
            min: 0,
            max: 50
          }
        }
      });
    </script>
  </body>
</html>

We bind the min and max value with the v-model directive.

min and max has the selected min and max values.

The color prop sets the color of the slider.

We can add the vertical prop to make 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">
          <q-badge color="secondary">
            {{ standard.min }} to {{ standard.max }}
          </q-badge>

          <div class="row justify-around">
            <q-range
              vertical
              v-model="standard"
              :min="0"
              :max="50"
              color="green"
            >
            </q-range>
          </div>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          standard: {
            min: 0,
            max: 50
          }
        }
      });
    </script>
  </body>
</html>

We can set the steps that the slider snap 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">
            {{ standard.min }} to {{ standard.max }}
          </q-badge>

          <div class="row justify-around">
            <q-range
              v-model="standard"
              :min="0"
              :max="50"
              :step="5"
              color="green"
            >
            </q-range>
          </div>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          standard: {
            min: 0,
            max: 50
          }
        }
      });
    </script>
  </body>
</html>

The step prop can also be set to a 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">
            {{ standard.min }} to {{ standard.max }}
          </q-badge>

          <div class="row justify-around">
            <q-range
              v-model="standard"
              :min="0"
              :max="50"
              :step="0.5"
              color="green"
            >
            </q-range>
          </div>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          standard: {
            min: 0,
            max: 50
          }
        }
      });
    </script>
  </body>
</html>

Conclusion

We can add a range slider into our Vue app with Quasar’s q-range component.

Quasar

Developing Vue Apps with the Quasar Library — Reverse Slider and Slider List Item

Post author By John Au-Yeung
Post date December 5, 2020
No Comments on Developing Vue Apps with the Quasar Library — Reverse Slider and Slider List Item

short-coated white and beige puppy on the floor

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.

Reverse Slider

We can reverse the slider with the reverse prop.

For instance, we can write:

<!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="primary" class="q-mb-lg">
            {{ model }}
          </q-badge>

          <q-slider
            v-model="model"
            color="secondary"
            :min="0"
            :max="50"
            reverse
          >
          </q-slider>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          model: 0
        }
      });
    </script>
  </body>
</html>

Slider on a Dark Background

We can add a slider on a background with the dark 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 bg-grey-10 text-white">
          <q-badge color="primary" class="q-mb-lg">
            {{ model }}
          </q-badge>

          <q-slider v-model="model" color="secondary" :min="0" :max="50" dark>
          </q-slider>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          model: 0
        }
      });
    </script>
  </body>
</html>

We make the background dark with the bg-grey-10 class.

The text-white class makes the text white.

Read Only and Disabled Slider

We can add the readonly or disable prop to disable the slider.

disable changes the style, but readonly doesn’t.

For example, we can write:

<!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="primary" class="q-mb-lg">
            {{ model }}
          </q-badge>

          <q-slider
            v-model="model"
            color="secondary"
            :min="0"
            :max="50"
            disable
          >
          </q-slider>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          model: 0
        }
      });
    </script>
  </body>
</html>

Slider in a List Item

We can add a slider inside the q-item-section component to display it in a list item.

For example, we can write:

<!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-list dense>
            <q-item>
              <q-item-section avatar>
                <q-icon color="teal" name="volume_up" />
              </q-item-section>
              <q-item-section>
                <q-slider
                  v-model="volume"
                  :min="0"
                  :max="10"
                  label
                  color="teal"
                >
                </q-slider>
              </q-item-section>
            </q-item>
          </q-list>
        </div>
      </q-layout>
    </div>
    <script>
      new Vue({
        el: "#q-app",
        data: {
          volume: 0
        }
      });
    </script>
  </body>
</html>

We add q-item-section inside a q-item to display it in a list item.

The avatar prop lets us add an avatar.

Conclusion

We can add a reverse slider and add sliders inside a list item with Quasar.

Quasar

Developing Vue Apps with the Quasar Library — Slider Options

Post author By John Au-Yeung
Post date December 5, 2020
No Comments on Developing Vue Apps with the Quasar Library — Slider Options

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.