デモ
へいしゃの フリエン にてお試しいただけます。
導入手順
基本的にオフィシャルサイトを見ればかんたんに導入できます。
install
$ yarn add vue-slider-component
nuxt.config.js
plugins: [ { src: '@/plugins/vue-slider-component', ssr: false } ]
index.vue
> template
<vue-slider ref="earningSlider" :min="20" :max="155" :interval="5" :tooltip="'none'" :marks="marks" v-model="values" @change="change()" > <template v-slot:process="{ start, end, style }"> <div :style="style" class="vue-slider-process"> <div :class="[ 'merge-tooltip', 'vue-slider-dot-tooltip-inner', 'vue-slider-dot-tooltip-inner-top', ]"> {{ values[0] }}万 〜 {{ values[1] }}万 </div> </div> </template> </vue-slider> </div>
<template v-slot:process="{ start, end, style }">
〜 </template>
は
の tooltip にしたかったための対応です。
オフィシャルのコチラを参考にしました。
> script
・・・ data() { return { intervalId: '', // v-model には Array を指定する values: [20, 155], // スライダー上のマーカーを指定する marks: { 20: '20万', 50: '50万', 75: '75万', 100: '100万', 125: '125万', 155: '155万' } } }, ・・・ methods: { change() { // setIntervalのIDが存在する場合は処理を終了する clearInterval(this.intervalId) // setInterval を利用し、処理を遅延させる this.intervalId = setInterval(() => { // 選択された値を取得 const _selected = this.$refs.earningSlider.getValue() // 最小値 _selected[0] // 最大値 _selected[1] // do something... // 現在の処理を終了する clearInterval(this.intervalId) // 0.5秒遅延させる }, 500) } } ・・・
setInterval を指定している理由
上記で setInterval を指定しているのは、
- 金額指定を変更したタイミングで検索処理を行いたい
change
はドラッグする分だけイベントが発火されてしまう(ドラッグするたびに検索処理が走ってしまう)- drag-end Event だと、クリックした場合イベントが発火されない
という3つの理由からとなります。
とりあえずコレでいい感じになりました。