Element UI Plus 的 ElSlider（滑塊組件）用於在指定數值範圍內進行單值/範圍選擇，支持步長、自定義樣式、禁用等功能，是表單、篩選、配置類場景的高頻組件。以下是完整的使用指南，包含基礎用法、進階定製及核心 API。

一、基礎用法（核心）

ElSlider 核心通過 v-model 綁定數值，默認是單滑塊，取值範圍由 min（最小值，默認 0）和 max（最大值，默認 100）控制。

<template>
  <!-- 基礎單滑塊 -->
  <el-slider v-model="sliderValue" />
  
  <!-- 綁定值展示 -->
  <div class="mt-2">當前值：{{ sliderValue }}</div>
</template>

<script setup>
import { ref } from 'vue'
// 初始化滑塊值（默認 0）
const sliderValue = ref(50)
</script>

二、進階定製（常用場景）

1. 自定義取值範圍與步長
  • min/max：設置滑塊的最小/最大值；
  • step：設置每次滑動的步長（默認 1，支持小數）；
  • show-input：顯示輸入框，可手動輸入數值（替代純滑動）。
<el-slider
  v-model="stepValue"
  min="0"
  max="10"
  step="0.5"       <!-- 步長 0.5 -->
  show-input       <!-- 顯示輸入框 -->
/>

<script setup>
const stepValue = ref(2.5)
</script>
2. 範圍滑塊（雙滑塊）

通過 range 屬性開啓雙滑塊，此時 v-model 綁定的是數組（[最小值, 最大值]），適用於區間篩選（如價格、時間範圍）。

<el-slider
  v-model="rangeValue"
  range            <!-- 開啓範圍滑塊 -->
  min="0"
  max="1000"
  step="10"
/>

<script setup>
// 初始化範圍值 [最小值, 最大值]
const rangeValue = ref([100, 500])
</script>
3. 顯示刻度與標籤
  • show-ticks：顯示刻度線；
  • show-tooltip：滑動時顯示懸浮提示（默認開啓，可設為 false 關閉）；
  • format-tooltip：自定義懸浮提示的顯示內容。
<el-slider
  v-model="tickValue"
  min="0"
  max="100"
  step="20"
  show-ticks       <!-- 顯示刻度 -->
  :format-tooltip="(val) => `${val}%`" <!-- 自定義提示（如加單位） -->
/>

<script setup>
const tickValue = ref(40)
</script>
4. 禁用狀態

通過 disabled 屬性禁用滑塊（無法滑動、輸入框只讀），支持動態綁定。

<!-- 固定禁用 -->
<el-slider v-model="disabledValue" disabled />

<!-- 動態禁用 -->
<el-slider v-model="disabledValue" :disabled="isDisabled" />

<script setup>
const disabledValue = ref(30)
const isDisabled = ref(true) // 動態控制禁用
</script>
5. 豎向滑塊

通過 vertical 屬性將滑塊改為豎向排列，需手動設置滑塊高度（否則顯示異常）。

<template>
  <div style="height: 200px;"> <!-- 必須設置容器高度 -->
    <el-slider
      v-model="verticalValue"
      vertical       <!-- 豎向滑塊 -->
      min="0"
      max="100"
    />
  </div>
</template>

<script setup>
const verticalValue = ref(60)
</script>
6. 自定義顏色（主題）
  • active-color：滑塊選中區域的顏色；
  • inactive-color：滑塊未選中區域的顏色；
  • disabled-active-color/disabled-inactive-color：禁用狀態下的對應顏色。
<el-slider
  v-model="colorValue"
  active-color="#13ce66"        <!-- 選中區綠色 -->
  inactive-color="#ff4949"      <!-- 未選中區紅色 -->
/>

<script setup>
const colorValue = ref(70)
</script>
7. 綁定事件
  • @change：滑塊值確認改變時觸發（滑動停止/輸入框回車）；
  • @input：滑塊值實時改變時觸發（滑動過程中持續觸發）。
<el-slider
  v-model="eventValue"
  @input="handleInput"   <!-- 實時觸發 -->
  @change="handleChange" <!-- 確認改變觸發 -->
/>

<script setup>
const eventValue = ref(50)

// 實時滑動觸發
const handleInput = (val) => {
  console.log('實時值：', val)
}

// 確認改變觸發（核心，用於提交/接口請求）
const handleChange = (val) => {
  console.log('最終值：', val)
  // 可在此處觸發篩選、配置保存等邏輯
}
</script>
8. 禁用部分區間

通過 marks 結合 disabled 實現區間禁用，marks 用於標記關鍵值，配合 inverse-tooltip 優化提示。

<el-slider
  v-model="markValue"
  :marks="marks"       <!-- 標記刻度 -->
  :disabled="disabledRange" <!-- 禁用指定區間 -->
/>

<script setup>
const markValue = ref(50)
// 標記刻度（key 為數值，value 為顯示文本）
const marks = {
  0: '0%',
  20: '20%',
  50: '50%',
  80: '80%',
  100: '100%'
}
// 禁用 0-20 和 80-100 區間
const disabledRange = (value) => {
  return value < 20 || value > 80
}
</script>

三、完整示例（整合所有用法）

<template>
  <div class="slider-demo" style="padding: 20px;">
    <h3>基礎單滑塊</h3>
    <el-slider v-model="baseValue" />

    <h3 class="mt-4">範圍滑塊（價格篩選）</h3>
    <el-slider
      v-model="rangeValue"
      range
      min="0"
      max="1000"
      step="50"
      show-input
      :format-tooltip="(val) => `¥${val}`"
    />
    <div class="mt-2">價格範圍：{{ rangeValue[0] }} - {{ rangeValue[1] }} 元</div>

    <h3 class="mt-4">帶刻度+自定義顏色</h3>
    <el-slider
      v-model="tickValue"
      min="0"
      max="100"
      step="20"
      show-ticks
      active-color="#409eff"
      inactive-color="#e6a23c"
    />

    <h3 class="mt-4">豎向滑塊（音量調節）</h3>
    <div style="height: 200px; display: flex; align-items: center;">
      <el-slider
        v-model="verticalValue"
        vertical
        min="0"
        max="100"
        show-tooltip
      />
      <span class="ml-4">音量：{{ verticalValue }}%</span>
    </div>

    <h3 class="mt-4">事件監聽</h3>
    <el-slider
      v-model="eventValue"
      @input="handleInput"
      @change="handleChange"
    />
    <div class="mt-2">實時值：{{ realTimeValue }} | 最終值：{{ finalValue }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 基礎滑塊
const baseValue = ref(50)
// 範圍滑塊
const rangeValue = ref([200, 600])
// 帶刻度滑塊
const tickValue = ref(60)
// 豎向滑塊
const verticalValue = ref(80)
// 事件監聽滑塊
const eventValue = ref(50)
const realTimeValue = ref(50)
const finalValue = ref(50)

// 實時輸入事件
const handleInput = (val) => {
  realTimeValue.value = val
}

// 確認改變事件
const handleChange = (val) => {
  finalValue.value = val
  console.log('滑塊最終值：', val)
}
</script>

四、核心 API 參考

1. Props（屬性）

屬性名

説明

類型

默認值

v-model/modelValue

綁定值（單滑塊：數值；範圍滑塊：數組）

number / [number, number]

0

min

最小值

number

0

max

最大值

number

100

step

步長

number

1

range

是否為範圍滑塊

boolean

false

vertical

是否豎向顯示

boolean

false

disabled

是否禁用

boolean

false

show-input

是否顯示輸入框

boolean

false

show-input-controls

輸入框是否顯示增減按鈕

boolean

true

show-ticks

是否顯示刻度線

boolean

false

show-tooltip

是否顯示懸浮提示

boolean

true

format-tooltip

自定義懸浮提示內容

Function(val)

—

active-color

選中區域顏色

string

#409eff

inactive-color

未選中區域顏色

string

#e5e7eb

marks

刻度標記（{ key: value }）

object

—

tooltip-class

懸浮提示自定義類名

string

—

2. Events（事件）

事件名

説明

回調參數

input

滑塊值實時改變時觸發

當前值（數值/數組）

change

滑塊值確認改變時觸發

當前值（數值/數組）

drag-start

滑塊開始拖動時觸發

當前值（數值/數組）

drag-end

滑塊結束拖動時觸發

當前值（數值/數組）

五、注意事項

  1. 豎向滑塊必須設置容器高度，否則無法正常顯示；
  2. 範圍滑塊的 v-model 必須綁定數組，初始值需為 [minVal, maxVal] 格式；
  3. step 支持小數，但需保證 (max - min) 能被 step 整除（避免精度問題）；
  4. show-input 開啓後，輸入框支持回車確認值，失去焦點也會自動校驗並同步到滑塊；
  5. marks 標記的數值需在 min/max 範圍內，否則不顯示。