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

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ずつ選択可能なスライダーになるということです。)

オプション( props )を加えたサンプル

各種 props を加えたサンプルを、先ほどの基本形のサンプルの下に2つ、作成してあります。
次のリンクより、ご覧ください。
v-slider(数値入力用スライダー)のサンプル

公式ドキュメント、APIページについて

v-slider コンポーネントの Vuetify公式ページは以下です。

上でご紹介した各種 props の他にも、さまざまな例が記載されていますので、一読をおすすめします。
スライダー・コンポーネント — Vuetify

また、公式APIページはこちらになります。他のコンポーネント同様、設定できる props の一覧が詳細に記載されています。
v-slider API — Vuetify

この記事のまとめ

「数値入力」という目的をユーザーに提供する時に
そのインターフェースとして、
単純にインプットタグを置き、
自由入力してもらう方法もあります。

その一方で、今回ご紹介したように
数値入力という行為をスライダーとしてビジュアル化して、
ユーザーにわかりやすく、
操作しやすいインターフェースを提供する。

これはまさに、UIデザイナーとしてできる、
改善アプローチの例のひとつだと感じています。

もちろん実際は、その二つを実装した状態のABテストを繰り返すなどしてみて、
どちらがユーザーにとって本当に利便性が高く、
良いUXに繋げることができるのか

という部分を測って見る必要もあると思いますが、

UIの提供手段を複数もっていること自体、
デザイナーとして、とても大切な観点だと感じます。

当サイトでは今後も、Vue.js や Vuetify に関する記事を書いていく予定です。

※この記事は内容の改善を目的に、随時更新を行う場合があります。