Nuxt.js に VueSliderComponent を導入し検索条件を範囲指定可能に

デモ

へいしゃの フリエン にてお試しいただけます。

導入手順

nightcatsama.github.io

基本的にオフィシャルサイトを見ればかんたんに導入できます。

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 だと、クリックした場合イベントが発火されない

という３つの理由からとなります。

とりあえずコレでいい感じになりました。