当前位置：首页 > VUE

vue实现slider

2026-02-10 00:31:20VUE

Vue实现Slider组件

使用原生HTML5 input range

通过Vue绑定input的value值实现基础滑动条功能：

vue实现slider

<template>
  <div>
    <input 
      type="range" 
      v-model="sliderValue"
      :min="min" 
      :max="max"
      @input="handleInput"
    >
    <span>{{ sliderValue }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sliderValue: 50,
      min: 0,
      max: 100
    }
  },
  methods: {
    handleInput(e) {
      console.log('当前值:', e.target.value)
    }
  }
}
</script>

自定义样式Slider

通过CSS定制滑动条外观：

vue实现slider

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

<script>
export default {
  props: ['min', 'max', 'value'],
  computed: {
    trackStyle() {
      const percentage = (this.value - this.min) / (this.max - this.min) * 100
      return {
        '--progress': `${percentage}%`
      }
    }
  }
}
</script>

<style>
.custom-slider {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, #4CAF50 var(--progress), #ddd var(--progress));
}

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

使用第三方库

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

npm install vue-slider-component --save

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

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

export default {
  components: { VueSlider },
  data() {
    return {
      value: 30,
      marks: {
        '0': '0°C',
        '50': '50°C',
        '100': '100°C'
      }
    }
  }
}
</script>

双向绑定实现

通过v-model实现父组件与子组件的双向数据绑定：

<!-- 父组件 -->
<template>
  <custom-slider v-model="temperature" />
</template>

<!-- 子组件 -->
<template>
  <input 
    type="range"
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  >
</template>

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>