vue-slider-component

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

参考 ^{1) 2)}

<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>