動画アプリや音楽アプリでよく見るスライダーですが、数値の入力をスライダーでも入力できるようにという要件がきたので、vue-slider-componentを使って実装してみました。
vue-slider-component (opens new window)
yarnもしくはnpmでインストールします。
yarn add vue-slider-component // or npm install vue-slider-component --save
スライダーを使用するコンポーネントに以下を記述。
importしている css ファイルの指定をdefault.css antd.css material.cssに変えることでスライダーのテーマを変えることができます。
Style theme | vue-slider-component (opens new window)
<template>
<div>
<VueSlider v-model="value" />
</div>
</template>
<script>
import VueSlider from "vue-slider-component";
import "vue-slider-component/theme/antd.css"; // default.css or antd.css or material.css
export default {
components: {
VueSlider
},
data() {
return {
value: 0,
}
},
};
</script>
これだけで一応動くようになります。以下は上記コード実装後のスライダーです。
全ては紹介しきれませんが、主要なoptionや設定方法を記載していきます。
入力値に最低値、最大値を設定する場合はminとmaxを設定します。
<template>
<div>
<VueSlider v-model="value" :min="min" :max="max" />
</div>
</template>
<script>
export default {
...
data() {
return {
value: 0,
min: 0,
max: 10000,
}
},
};
</script>
範囲入力(from,to)等、複数の値を入力可能にするには、valueの値を配列にします。
例では 2 つの値の入力が可能ですが、valueの配列の要素を増やせば 2 つ以上の値の入力も可能です。
<template>
<div>
<VueSlider v-model="value" />
</div>
</template>
export default {
...
data() {
return {
value: [0, 10000],
}
},
};
</script>
スライダーを D&D で動かした際に変化する数値の最小値の設定はintervalを定義します。
例えば、金額の入力は 100 円単位のみといった場合に:interval="100"と記述すれば、スライダーの値は 100 単位で変動するようになります。
<template>
<div>
<VueSlider v-model="value" :interval="interval" />
</div>
</template>
export default {
...
data() {
return {
value: [0, 10000],
interval: 100,
}
},
};
</script>
スライダーを D&D で動かした際に変化する数値の最小値の設定はintervalを定義します。
例えば、金額の入力は 100 円単位のみといった場合に:interval="100"と記述すれば、スライダーの値は 100 単位で変動するようになります。
<template>
<div>
<VueSlider v-model="value" :interval="interval" />
</div>
</template>
export default {
...
data() {
return {
value: [0, 10000],
interval: 100,
}
},
};
</script>
入力を受け付けないようにするにはdisabledを定義します。
<template>
<div>
<VueSlider v-model="value" :disabled="disabled" />
</div>
</template>
export default {
...
data() {
return {
value: [0, 10000],
disabled: true,
}
},
};
</script>
ツールチップの表示の制御をする場合はtooltipを設定します。デフォルトはactiveですが、表示したくない場合は none、常に表示する場合はalwaysを設定します。
また、ツールチップの表示位置を変更する場合はtooltip-placementを指定します。こちらのデフォルトはtopですが、right bottom leftの指定が可能です。
ツールチップ内に表示される値をフォーマットしたい場合は、tooltip-formatterを設定します。以下の例では入力値に¥を付与し、数値をカンマ区切りで表示するように設定しています。
ツールチップの色や背景色といったスタイルを変更したい場合は、tooltip-styleを設定し、css を上書きすることができます。
<template>
<div>
<VueSlider
v-model="value"
:tooltip="tooltip"
:tooltip-placement="tooltipPlacement"
:tooltip-formatter="formatter"
:tooltip-style="tooltipStyle"
/>
</div>
</template>
export default {
...
data() {
return {
value: [0, 10000],
tooltip: 'always', // 'none' | 'always' | 'hover' | 'focus' | 'active'
tooltipPlacement: 'bottom', // 'top' | 'right' | 'bottom' | 'left'
formatter: (v) => (v ? `¥${v.toLocaleString()}` : " - "),
tooltipStyle: {
color: "#333",
backgroundColor: "#fff",
border: "2px solid #cfcfcf",
},
}
},
};
</script>
スライダーのスタイル変更には、dot-style rail-style process-styleで css の変更を行います。
dot-styleはスライダーのつまみのスタイル定義、rail-styleはスライダーのバーのスタイル定義、process-styleはスライダーのバーのアクティブ部分のスタイル定義になります。
また、スライダーのつまみの大きさを変更したい場合はdot-sizeで変更可能です。
<template>
<div>
<VueSlider
v-model="value"
:dot-size="dotSize"
:dot-style="dotStyle"
:rail-style="railStyle"
:process-style="processStyle"
/>
</div>
</template>
export default {
...
data() {
return {
value: [0, 10000],
dotSize: 24,
dotStyle: {
backgroundColor: "#fff",
borderColor: "#0852a8",
},
railStyle: {
border: "1px solid #cfcfcf",
backgroundColor: "#fff",
},
processStyle: {
border: "2px solid #cfcfcf",
backgroundColor: "#0852a8",
},
}
},
};
</script>
以下、codesandbox で実際のコードと動作を確認できます。
ここで挙げた以外にも設定やカスタマイズ方法がたくさんあるので、スライダーを使用する際には重宝しそうです。