Slider スライダー - Vant 4
Slider スライダー
紹介
ドラッグ可能な入力バー。指定範囲の値を選択します。
導入
以下の方法でコンポーネントをグローバル登録します。詳細はコンポーネント登録を参照してください。
js
import { createApp } from'vue';
import { Slider } from'vant';
const app = createApp();
app.use(Slider);🎯 コード例
🎪 基本用法
v-model で現在値をバインドし、ユーザーはスライダーをドラッグして値を選択できます。
html
<template>
<van-slider v-model="value" @change="onChange" />
</template>
<script>
import { ref } from 'vue';
import { showToast } from 'vant';
export default {
setup() {
const value = ref(50);
const onChange = (value) => {
showToast(`現在の値：${value}`);
};
return {
value,
onChange,
};
},
};
</script>🎭 デュアルスライダー
range 属性でデュアルスライダーを有効化します。value は配列である必要があり、範囲選択に適しています。
html
<template>
<van-slider v-model="value" range @change="onChange" />
</template>
<script>
import { ref } from 'vue';
import { showToast } from 'vant';
export default {
setup() {
// デュアルスライダー時、値は配列である必要があります
const value = ref([10, 50]);
const onChange = (value) => {
showToast(`現在の範囲：${value[0]} - ${value[1]}`);
};
return {
value,
onChange,
};
},
};
</script>📏 選択範囲の指定
min と max 属性で最小値・最大値を設定します。
html
<template>
<van-slider v-model="value" :min="-50" :max="50" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const value = ref(10);
return {
value,
};
},
};
</script>🚫 無効化
disabled 属性でスライダーを無効化します。無効状態ではドラッグできません。
html
<template>
<van-slider v-model="value" disabled />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const value = ref(50);
return {
value,
};
},
};
</script>📐 ステップの指定
step 属性でステップ幅を設定します。スライダーはステップの整数倍のみ選択可能です。
html
<template>
<van-slider v-model="value" :step="10" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const value = ref(50);
return {
value,
};
},
};
</script>🎨 スタイルのカスタマイズ
bar-height でバーの高さ、active-color でアクティブ色を設定します。
html
<template>
<van-slider
v-model="value"
:bar-height="4"
active-color="#ee0a24"
/>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const value = ref(50);
return {
value,
};
},
};
</script>🎛️ ボタンのカスタマイズ
button スロットでスライダーボタンのスタイルと内容をカスタマイズできます。
html
<template>
<van-slider v-model="value">
<template #button>
<div class="custom-button">{{ value }}</div>
</template>
</van-slider>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const value = ref(50);
return {
value,
};
},
};
</script>
<style>
.custom-button {
width: 26px;
color: #fff;
font-size: 10px;
line-height: 18px;
text-align: center;
background-color: #ee0a24;
border-radius: 100px;
}
</style>📱 縦方向
vertical 属性で縦表示に切り替えます。高さは親要素の 100% になります。
html
<template>
<div style="height: 150px; padding-left: 30px;">
<van-slider v-model="value" vertical @change="onChange" />
<van-slider
v-model="value2"
range
vertical
style="margin-left: 100px;"
@change="onChange"
/>
</div>
</template>
<script>
import { ref } from 'vue';
import { showToast } from 'vant';
export default {
setup() {
const value = ref(50);
const value2 = ref([10, 50]);
const onChange = (value) => {
showToast(`現在の値：${value}`);
};
return {
value,
value2,
onChange,
};
},
};
</script>📋 API
🎛️ Props
| 属性名 | 説明 | 型 | デフォルト |
|---|---|---|---|
| v-model | 📊 現在の進捗（デュアルでは配列） | *number | [number, number]* |
| max | 📈 最大値 | *number | string* |
| min | 📉 最小値 | *number | string* |
| step | 📐 ステップ | *number | string* |
| bar-height | 📏 バーの高さ（デフォルト単位は px） | *number | string* |
| button-size | 📐 ボタンサイズ（デフォルト単位は px） | *number | string* |
| active-color | 🎨 バーのアクティブ色 | string | #1989fa |
| inactive-color | 🎨 バーの非アクティブ色 | string | #e5e5e5 |
| range | 🎭 デュアルスライダーを有効にするか | boolean | false |
| reverse | 🔄 バーを反転表示するか | boolean | false |
| disabled | 🚫 スライダーを無効化するか | boolean | false |
| readonly | 👁️ 読み取り専用にするか（変更不可） | boolean | false |
| vertical | 📱 縦表示にするか | boolean | false |
🎪 Events
| イベント名 | 説明 | コールバック引数 |
|---|---|---|
| update:model-value | 🔄 進捗が変化したときにリアルタイム発火 | value: number |
| change | ✅ 進捗が変化しドラッグ終了後に発火 | value: number |
| drag-start | 🚀 ドラッグ開始時に発火 | event: TouchEvent |
| drag-end | 🏁 ドラッグ終了時に発火 | event: TouchEvent |
🎭 Slots
| 名称 | 説明 | パラメータ |
|---|---|---|
| button | 🎛️ スライダーボタンのカスタマイズ | { value: number, dragging: boolean } |
| left-button | ⬅️ 左ボタンのカスタマイズ（デュアル時） | { value: number, dragging: boolean, dragIndex?: number } |
| right-button | ➡️ 右ボタンのカスタマイズ（デュアル時） | { value: number, dragging: boolean, dragIndex?: number } |
📘 型定義
コンポーネントは以下の型定義をエクスポートし、TypeScript プロジェクトでの利用を容易にします：
ts
import type { SliderProps } from 'vant';🎨 テーマカスタマイズ
🎭 スタイル変数
コンポーネントは以下の CSS 変数を提供しており、カスタムスタイルに使用できます。使用方法については ConfigProvider コンポーネント を参照してください。
| 名称 | デフォルト値 | 説明 |
|---|---|---|
| --van-slider-active-background | var(--van-primary-color) | 🎨 アクティブ背景色 |
| --van-slider-inactive-background | var(--van-gray-3) | 🎨 非アクティブ背景色 |
| --van-slider-disabled-opacity | var(--van-disabled-opacity) | 👻 無効状態の不透明度 |
| --van-slider-bar-height | 2px | 📏 バーの高さ |
| --van-slider-button-width | 24px | 📐 ボタンの幅 |
| --van-slider-button-height | 24px | 📐 ボタンの高さ |
| --van-slider-button-radius | 50% | 🔘 ボタンの角丸 |
| --van-slider-button-background | var(--van-white) | 🎨 ボタンの背景色 |
| --van-slider-button-shadow | 0 1px 2px rgba(0, 0, 0, 0.5) | 🌟 ボタンの影 |
📚 関連ドキュメント
🎛️ フォームコンポーネント
- Field 入力欄 - 📝 テキスト入力に使用
- Stepper ステッパー - 🔢 数値の調整に使用
- Rate 評価 - ⭐ 評価選択に使用
- Switch スイッチ - 🔘 スイッチ状態の切り替え
📊 表示コンポーネント
- Progress 進捗バー - 📈 進捗の表示に使用
- Circle 円形進捗バー - 🔄 円形進捗の表示に使用
🎨 フィードバックコンポーネント
- Toast トースト - 💬 操作フィードバックに使用
- Dialog ダイアログ - 💬 重要情報の確認に使用
🔧 ツールコンポーネント
- ConfigProvider グローバル設定 - ⚙️ グローバル設定のカスタマイズに使用