レンジスライダー
2023年7月15日
みなさんこんにちは。
ケミストのWeb担当みやのです。
「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。
今回は「レンジスライダー」について書きます。
レンジスライダーとは
上のように「つまみ」をスライドして数値を選べる入力欄のことを「レンジ入力欄」または「レンジスライダー」といいます。
音量調節なんかで使われていますね。
このつまみのことをサム（thumb）というらしいです。
<input type="range">を使います。
<input type="range" min="0" max="100" step="1" value="50">minは最小値
maxは最大値
stepはいくつずつ数値を変化させるか
valueは初期値になります。
スライダーの見た目はブラウザ準拠のようです。ブラウザのバージョン、WindowsかMacかで見た目が違うかもしれません。
見た目をカスタマイズしてすべてのブラウザで共通の見た目にすることもできるようですが、それはまたの機会に挑戦してみます。
現在の値を取得、表示
キーボードを使わずに数値を変更できるのがレンジスライダーのいいところですが、現在の数値がいくつなのかがわからないですね。
現在の値を表示し、つまみの位置に応じて値を変える方法があるようです。
参考：HTMLリファレンス｜input type="range"でレンジスライダーを作る
スライダーを設置し、IDをexampleとします。
<input type="range" id="example" min="0" max="100" step="1" value="50">テキストを配置し、数値が入る部分のIDをcurrent-valueとします。
<p>現在の値は<span id="current-value"></span>です</p>以下のスクリプトを記述します。
const inputElem = document.getElementById('example');
const currentValueElem = document.getElementById('current-value');
const setCurrentValue = (val) => {
currentValueElem.innerText = val;
}
const rangeOnChange = (e) => {
setCurrentValue(e.target.value);
}
window.onload = () => {
inputElem.addEventListener('input', rangeOnChange);
setCurrentValue(inputElem.value);
}
現在の値はです
今まで何回か出てきた => は「アロー関数」というらしいです。
ちょっと省略して書けるよっていうことみたいです。
レンジスライダーの値を取得できるようになったので、計算フォームに組み込むこともできそうです。
だいぶ前に作った体表面積計算ツールの身長と体重の部分をレンジスライダーに変えてみました。
スマホだとちょっと使いづらいな・・・
2つのスライダーを連動
2つのスライダーを連動させる方法があるようです。
これまた難しいのが出てきました。
Vue.jsって何だろう。jQueryの親戚でしょうか。サラマンダーより、ずっとはやい!!
とりあえず上記ページを参考にして、日本とハワイ（時差19時間）で作ってみようと思います。
まずVue.jsを読み込みます。
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>スクリプトを以下のように記述します。
new Vue( {
el: '#app',
data: {
timeDiff: -19,
timeJapan: new Date().getHours(),
timeHawaii: new Date().getHours() -19,
},
methods: {
loop: function () {
if(this.timeJapan > 23){
this.timeJapan = this.timeJapan - 24
}else if(this.timeJapan < 0){
this.timeJapan = this.timeJapan + 24
}
if(this.timeHawaii > 23){
this.timeHawaii = this.timeHawaii - 24
}else if(this.timeHawaii < 0){
this.timeHawaii = this.timeHawaii + 24
}
},
move: function (movingCountry) {
this.timeJapan = Number(this.timeJapan);
this.timeHawaii = Number(this.timeHawaii)
if(movingCountry == 'japan'){
this.timeHawaii = this.timeJapan + this.timeDiff
}else if(movingCountry == 'hawaii'){
this.timeJapan = this.timeHawaii - this.timeDiff
}
this.loop()
},
},
created: function () {
this.loop()
},
})ちょっと何言ってるかわからないです。
thisって何なんだろう。
スライダーが右端に到達したら、ループして左端に移動するようにしてあるみたいです。これ考えた人は天才じゃよ、天才！
<input type="range">を2つ設置します。
<div id="app">
<div>日本 {{ timeJapan }}:00</div>
<input v-on:input='move("japan")' v-model="timeJapan" type="range" max="24">
<div>ハワイ {{ timeHawaii }}:00</div>
<input v-on:input='move("hawaii")' v-model="timeHawaii" type="range" max="24">
</div>この二重中括弧{{ }}はマスタッシュ構文（moustache：口ひげ）というそうです。
シングルクォーテーションを使うとDreamWeaverがエラーを吐きまくるけど気にしない。
さて、そのまま真似したのでは芸がないので当サイトではよくあることちょっといじってみましょう。
日本の時刻の位置に応じてテキストを切り替えてみます。
日本の時刻が0時～18時の場合は（昨日の）
19時～23時の場合は（今日の）というテキストを表示させてみます。
v-ifとv-elseを使います。
<div id="app">
<div>日本 {{ timeJapan }}:00</div>
<input v-on:input='move("japan")' v-model="timeJapan" type="range" max="24">
<div>ハワイ<span v-if="timeJapan < 19">（昨日の）</span><span v-else>（今日の）</span> {{ timeHawaii }}:00</div>
<input v-on:input='move("hawaii")' v-model="timeHawaii" type="range" max="24">
</div>まとめ
・<input type="range">を使おう
・max、min、stepを設定しよう
・Vue.jsとはいったい...うごごご
Vue.jsのv-sliderを使うことでもレンジスライダーを作ることができるみたいです。後でやってみよう。
