v-slider
2023年7月25日
みなさんこんにちは。
ケミストのWeb担当みやのです。
「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。
今回は、前回出てきた「Vue.js」を使ってレンジスライダーを作ってみました。
とりあえず実装
参考：tedate｜Vuetifyで数値入力用のシンプルかつ綺麗なスライダーを実装する
<v-slider></v-slider>と書きます。
<v-slider></v-slider>v-sliderをv-app、v-main、v-containerで囲み、さらに全体をdivで囲ってIDをappとします。
<div id="app">
<v-app>
<v-main>
<v-container>
<v-slider></v-slider>
</v-container>
</v-main>
</v-app>
</div>v-sliderの開始タグの中に以下のように記述します。
<div id="app">
<v-app>
<v-main>
<v-container>
<v-slider
v-model="myslider"
thumb-label
></v-slider>
</v-container>
</v-main>
</v-app>
</div>thumb-labelと書くと、現在の数値を吹き出しで表示してくれるようになります。
</body>の直前でVue.jsとvuetify.jsを読み込みます。
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><head>～</head>内でvuetify.min.cssを読み込みます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css">以下のスクリプトを記述します。
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
myslider: 0
}
});dataの中の数値は初期値のようです。
おっ なかなかいい感じですね！前回の苦労は何だったのか
最大値と最小値
最大値と最小値をいじれるみたいです。
最小値-100、最大値200、初期値を50にしてみましょう。
<div id="app">
<v-app>
<v-main>
<v-container>
<v-slider
v-model="mysliderHasRange"
thumb-label
v-bind:max="maxrange"
v-bind:min="minrange"
></v-slider>
</v-container>
</v-main>
</v-app>
</div>new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
mysliderHasRange: 50,
maxrange: 200,
minrange: -100
}
});スクリプトでmaxrangeとminrangeを定義して、v-bind:maxとv-bind:minを使ってv-sliderに数値を渡す必要があるようです。
ステップ
1目盛の値を変更できるようです。
最小値0、最大値1000、1目盛100にしてみましょう。
<div id="app">
<v-app>
<v-main>
<v-container>
<v-slider
v-model="mysliderHasStep"
thumb-label
step="100"
ticks="always"
max="1000"
tick-size="5"
></v-slider>
</v-container>
</v-main>
</v-app>
</div>new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
mysliderHasStep: 0
}
});stepが1目盛の値
ticks="always"で目盛を常時表示
tick-sizeが目盛の大きさのようです。
今回は最大値を直接v-sliderに記述していいみたいです。
まとめ
ところでどうやって値を取得するのでしょうか。
これを使ってChild-Pugh分類とかを作ってみたいです（ラジオボタンの方がよさそうですが）
