vue-slider-component

『A highly customized slider component』
Vueにてスライダーを作成したい時に使用するコンポーネント

参考 ¹⁾ ²⁾

基本的な使い方

<vue-slider v-model="value" />

範囲の最小値、最大値を設定する

<vue-slider
  v-model="value"
  min="0"
  max="10"
></vue-slider>

数値の間隔を設定する

<vue-slider
  v-model="value"
  interval="0.1"
></vue-slider>

フォーカスしている間の挙動を変える

<vue-slider v-model="value">
  <template v-slot:dot="{ value, focus }">
    <div :class="['custom-dot', { focus }]"></div>
  </template>
</vue-slider>

...

<style>
  .custom-dot {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background-color: pink;
    transition: all .3s;
  }
  .custom-dot:hover {
    transform: rotateZ(45deg);
  }
  .custom-dot.focus {
    border-radius: 50%;
  }
</style>

¹⁾

『vue-slider-component』, GitHub, https://github.com/NightCatSama/vue-slider-component, 2022-02-09

²⁾

『Vue Slider Component』, https://nightcatsama.github.io/vue-slider-component/, 2022-02-09