vue-slider-component を使ってみる

2021年12月8日

参考

vue-slider-component

インストール

インストールする。
npm だけ記載しておきます。

npm install vue-slider-component --save

基本設定

インポートします。

import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'

コンポーネントに登録します。

export default {
    components: {
        VueSlider
    }
    ...

スライダーの値にバインドする値をプロパティに定義します。

export default {
    data() {
        return {
            value: [1],
        }
    }
    ...

スライダーを設置します。

<div class="slider-wrapper">
    <vue-slider v-model="value"></vue-slider>
</div>

スロットを増やす

2個にするには配列に値を2個指定してあげます。

export default {
    data() {
        return {
            value: [1, 50],
        }
    }
    ...

吹き出しの値を変更する

吹き出しに表示される内容が配列の値のみになっているので、「%」を付与してみます。

<vue-slider
    v-model="value"
    :tooltip-formatter="formatter"
></vue-slider>

export default {
    data() {
        return {
            value: [1, 100],
            formatter: '{value}%',
        }
    }
    ...

吹き出しスロットのレンジを表示する

a ～ b 円と言った吹き出しを表示してみます。

<vue-slider v-model="value" tooltip="none" :process="process" :min-range="10">
    <template v-slot:process="{ start, end, style, index }">
    <div class="vue-slider-process" :style="style">
        <div :class="[
        'merge-tooltip',
        'vue-slider-dot-tooltip-inner',
        'vue-slider-dot-tooltip-inner-top',
        ]">
        {{ value[index] }} 円 ～ {{ value[index + 1] }} 円
        </div>
    </div>
    </template>
</vue-slider>

data() {
    return {
        value: [0, 100],
        process: val => [
            [val[0], val[1]],
        ],
    }
...

.merge-tooltip {
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translate(-50%, -15px);
}

値を刻みにする場合は interval を指定します。
例えば 10 刻みにしたい場合は下のように指定します。

 <vue-slider v-model="value" tooltip="none" :process="process" :min-range="10" :interval="10">

他にも色々デザインを変えたりイベントも設定できるようです。

YouTube