vue实现滑动条

Vue 实现滑动条的方法

使用原生 HTML5 input range

通过 Vue 绑定 v-model 实现双向数据绑定，监听 input 或 change 事件更新数值。

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

<script>
export default {
  data() {
    return {
      sliderValue: 50
    }
  },
  methods: {
    handleInput() {
      console.log('值变化:', this.sliderValue);
    }
  }
}
</script>

自定义样式滑动条

通过 CSS 覆盖原生样式实现个性化设计。

<template>
  <div class="custom-slider">
    <input 
      type="range" 
      class="slider"
      v-model="value"
    />
  </div>
</template>

<style>
.custom-slider {
  width: 300px;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: #ddd;
  outline: none;
  opacity: 0.7;
  transition: .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #4CAF50;
  cursor: pointer;
  border-radius: 50%;
}
</style>

使用第三方组件库

推荐使用 vue-slider-component 等成熟库实现高级功能。

安装：

npm install vue-slider-component --save

示例代码：

<template>
  <vue-slider 
    v-model="value"
    :min="0"
    :max="100"
    :interval="10"
    tooltip="always"
  />
</template>

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

export default {
  components: {
    VueSlider
  },
  data() {
    return {
      value: 40
    }
  }
}
</script>

实现垂直滑动条

通过 CSS 的 transform 属性旋转实现垂直方向。

<template>
  <div class="vertical-container">
    <input 
      type="range" 
      class="vertical-slider"
      v-model="value"
    >
  </div>
</template>

<style>
.vertical-container {
  height: 200px;
  display: flex;
  align-items: center;
}

.vertical-slider {
  -webkit-appearance: slider-vertical;
  width: 8px;
  height: 150px;
  padding: 0 5px;
}
</style>

带刻度标记的滑动条

结合 v-for 渲染刻度标记，通过计算属性定位。

<template>
  <div class="marked-slider">
    <input 
      type="range" 
      v-model="value"
      min="0"
      max="100"
      step="10"
    >
    <div class="marks">
      <span 
        v-for="i in 11" 
        :key="i"
        :style="{ left: `${(i-1)*10}%` }"
      >{{ (i-1)*10 }}</span>
    </div>
  </div>
</template>

<style>
.marked-slider {
  position: relative;
  width: 300px;
}

.marks {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  top: 20px;
}

.marks span {
  position: absolute;
  transform: translateX(-50%);
}
</style>