[Vue.js]Vuetifyで数値入力用のスライダーを実装する方法[v-slider]

Vuetifyで数値入力用のシンプルかつ綺麗なスライダーを実装する

VuetifyのUIコンポーネントを実際に試して見るシリーズの記事、11回目です。
今回は、v-slider というコンポーネントを使用して、
シンプルかつ綺麗な、数値入力用のスライダーを作成してみたいと思います。

↑こんな感じの、数値入力用のスライダーを表示してみます。上記ムービーのように、値も0~100の間と決め打ちではなく、カスタマイズできます。（このムービーの例は、0~1000の間を100ずつ動くサンプルです）

Vuetifyの導入方法について等は、以前の記事：
[Vue.js]Vuetify のUIコンポーネントを使ってみる[v-slide, v-caroucel編] にCDN経由での導入方法を、
[Vue.js] Vuetify を導入して Material Design をスマートに取り入れる方法内に、CLI経由での導入方法 をご紹介しています。あわせてご覧ください。

コードをご紹介

<template>
  <v-slider
    v-model="myslider"
    thumb-label
  ></v-slider>
</template>

解説など

こちらの v-slider コンポーネントですが、実にシンプルで使いやすいです。
基本形としては、上記のコードの通り
<v-slider></v-slider>
と記述するだけです。
v-model で渡している data の中身は数値ですが、
これが数値入力用スライダーの初期位置になります。

<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: {
        myslider: 1
      }
    });
</script>

↑v-model で myslider: 1 という値を渡しているので、デフォルト位置が 1 の数値入力用スライダーになるという事です。

また、thumb-label というオプション
（オプションと言うより、props という概念になります）を指定する事で、
現在の数値を表示するマーカーをスライダーに加えることができます。

実際に動くサンプル

今回も実際に動くサンプルを作成してあります。
次のリンクより、ご覧ください。
v-slider（数値入力用スライダー）のサンプル

そのほかのオプション( props )

この数値入力用スライダーを表示できる v-slider ですが、上のような基本形のほかに、
様々なオプション( props )があります。

最小値、最大値を設定する

<template>
  <v-slider
    v-model="myslider"
    thumb-label
    v-bind:max="maxrange"
    v-bind:min="minrange"
  ></v-slider>
</template>

↑これは、基本形に
v-bind:max
v-bind:min
として、最大値と最小値を渡してあげることで設定できます。この場合のdataは以下のような形になります。

<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: {
        myslider: 1,
        maxrange: 80,
        minrange: 0
      }
    });
</script>

↑この例は、最大値を80、最小値を0に設定している、という事です。

移動範囲を一定の値にする

こちらは、たとえば0~100の間を、10ずつ選択してほしい場合などに使用できます。
使い方は、
step という props と
tick という props を設定するだけです。

<template>
  <v-slider
    v-model="mysliderHasStep"
    thumb-label
    step="100"
    ticks="always"
    max="1000"
    tick-size="5"
  ></v-slider>
</template>

↑ticks="always"とすると、常時ステップ目盛りが表示できます。
tick-size は、目盛りの大きさになります。
max は最大値（これは先ほどの例の様にv-bindによるdata渡しでなくても、この様に直接数値を指定することもできます）
step は、maxに対してのステップ数です。
（つまり、この例では0~1000の間を10段階刻みで選択可能なスライダーになります。
この値を max=”100″, step=”10″ とすれば、
0~100の間を、10ずつ選択可能なスライダーになるということです。）