vue实现滑块区间

Vue 实现滑块区间

使用原生 input range 实现

在 Vue 中可以通过原生 HTML5 的 input[type="range"] 元素实现基础滑块。需要绑定 v-model 监听值变化：

<template>
  <div>
    <input 
      type="range" 
      v-model="sliderValue"
      min="0" 
      max="100"
    >
    <p>当前值: {{ sliderValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sliderValue: 50
    }
  }
}
</script>

实现双滑块区间选择

对于区间选择（如价格区间），需要两个滑块协同工作。通过计算属性处理交互逻辑：

<template>
  <div>
    <input 
      type="range" 
      v-model="minValue"
      :min="rangeMin" 
      :max="maxValue"
    >
    <input 
      type="range" 
      v-model="maxValue"
      :min="minValue" 
      :max="rangeMax"
    >
    <p>区间: {{ minValue }} - {{ maxValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rangeMin: 0,
      rangeMax: 100,
      minValue: 20,
      maxValue: 80
    }
  }
}
</script>

使用第三方组件库

对于更复杂的交互，推荐使用现成组件库：

• Element UI 的 el-slider：

  <el-slider v-model="value" range :min="0" :max="100"></el-slider>

• Vuetify 的 v-range-slider：

  <v-range-slider v-model="range" :max="100" :min="0"></v-range-slider>

自定义样式滑块

通过 CSS 覆盖原生样式实现视觉定制：

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: #ddd;
  border-radius: 4px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #42b983;
  border-radius: 50%;
}

动态响应式示例

结合计算属性和 watch 实现动态响应：

<template>
  <div>
    <input 
      type="range" 
      v-model="currentMin" 
      :min="staticMin" 
      :max="currentMax"
    >
    <input 
      type="range" 
      v-model="currentMax" 
      :min="currentMin" 
      :max="staticMax"
    >
    <p>当前区间: {{ currentMin }} - {{ currentMax }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      staticMin: 0,
      staticMax: 1000,
      currentMin: 200,
      currentMax: 800
    }
  },
  watch: {
    currentMin(val) {
      if (val > this.currentMax) this.currentMax = val
    },
    currentMax(val) {
      if (val < this.currentMin) this.currentMin = val
    }
  }
}
</script>

移动端优化

针对移动设备添加触摸事件支持：

methods: {
  handleTouchStart(e) {
    this.isDragging = true
  },
  handleTouchMove(e) {
    if (!this.isDragging) return
    // 计算滑块位置逻辑
  }
}