vue-circle-slider

2023年8月5日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「Vue.js」を使った円形のレンジスライダー「vue-circle-slider」をご紹介します。

準備

v-sliderの値をどうやって取得するのか調べていたら「vue-circle-slider」なるものを見つけたのでちょっと触ってみました。

参考：GitHub｜devstark-com/vue-circle-slider: Circle slider component for Vue.js

<circle-slider>タグを設置し<div id="app">で囲みます。

<div id="app">
             
  <circle-slider v-model="val1"></circle-slider>

  <div>{{ val1 }}</div>

</div>

この二重中括弧（マスタッシュ？）を書くと、現在の値を表示してくれるようです。

前回同様</body>の直前でVue.jsとvuetify.jsを読み込み、さらにvue-circle-slider.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>

<script src="https://cdn.jsdelivr.net/npm/vue-circle-slider@1.0.2/dist/vue-circle-slider.browser.min.js"></script>

以下のスクリプトを記述します。

var app = new Vue({
  el: '#app',
  components: {
    circleslider: VueCircleSlider.VueCircleSlider
  },
  data: {
    val1: 0
  }
})

<div id="app">
  
  <circle-slider
    v-model="val2"
    circle-color="#cecece"
    progress-color="#dc3545"
    knob-color="#dc3545"
    @touchmove="$refs.input.blur()"
    :min="0"
    :max="360"
    :step-size="1"
    :side="300"
    :circle-width="4"
    :progress-width="6"
    :knob-radius="10"
  ></circle-slider>
                
  <input ref="input" type="number" v-model.number="val2" min="0" max="360">
  
</div>

var app = new Vue({
  el: '#app',
  components: {
    circleslider: VueCircleSlider.VueCircleSlider
  },
  data: {
    val2: 0
  }
})

circle-colorは通常時の円の色
progress-colorは進めた時の円の色
knob-colorはツマミの色
:minは最小値
:maxは最大値
:step-sizeは1目盛の値
:sideは円の大きさ
:circle-widthは通常時の円の線幅
:progress-widthは進めた時の円の線幅
:knob-radiusはツマミの大きさ

だと思います。

@touchmove="$refs.input.blur()"はよくわかりません。タブレット端末関連？

残念ながらレスポンシブ（画面幅に対して何％か）にはできませんでした。

<input>に上記のように記述すると、数値を入力することでもスライダーを動かすことができるようになります。

まとめ

結局、どうやって値を取得しているのかわからなかったですね。それにしてもヨヨ様の破壊力よ

円を何周もできて、しかも何周目かをカウントしてくれるような感じにできないかなあ。