【Vue.js】レンジ入力欄（スライダー）のデータをバインディングさせて遊んでみた

16 Jan

内容自体は軽めですが、応用すれば面白いことができそうだったので、メモがてら記事にしようと思います。

HTML5から追加されたinputタグの一つとしてレンジ入力欄というものがあります。ドラッグで度合いを調整できるようなUIとなっており、スライダーと言った方がイメージしやすいかもしれませんね。タグを使うと以下のようなインターフェースが表示されます。

コンテンツ一覧

レンジ入力欄（スライダー）について

主に使用するプロバティとしては、最小値、最大値、ステップ（どのように刻んでいくか）の3つでしょうか。

minプロバティ	調整できる最小値を指定します（デフォルト0）。
maxプロバティ	調整できる最大値を指定します（デフォルト100）。
stepプロバティ	どのように刻んでいくか指定します（デフォルト1）。

例）最大値を1.5とし、0.1ずつ刻みたい場合

<input type="range" max="1.5" step="0.1">

その他レンジ入力欄の詳細については、こちらご参照ください。

コンテンツ一覧へ戻る

Vue.jsの処理について

レンジ入力欄を操作すると、正方形のdivを回転させられるというサンプルを想定してみたいと思います。

HTML

<div id="test1">
  <div class="square" v-bind:style="{ transform: 'rotate('+rotate+'deg)' }"></div>
  <input type="range" max="360" v-model="rotate">
</div>

レンジ入力欄、正方形のdivが置かれている状態ですね。

v-bind:style="{ transform: 'rotate('+rotate+'deg)' }"という記述により、transformのrotateの値をレンジ入力欄から引っ張ってくることが出来るようになります。

Vue.js

続いてVue.js側ですが、今回の場合変数を設けているだけの役割となりますね。

new Vue( {
  el: '#test1',
  data: {
    rotate: 0
  }
} )

当記事の説明をベースとした、別途サンプルを設けましたので、併せてご確認いただくとよいかと思います！

サンプルを確認する

コンテンツ一覧へ戻る

例えばカラー指定のrgbをそれぞれデータバインディングさせたりすれば、色変更できるUIができたり…アイディア次第で使い道は色々ありそうですね！

About

Links