用vue实现滑动输入条

2026-01-07 06:35:56VUE

使用 Vue 实现滑动输入条

使用原生 HTML5 input range 实现

在 Vue 模板中直接使用 <input type="range">，通过 v-model 绑定数据：

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

<script>
export default {
  data() {
    return {
      sliderValue: 50
    }
  },
  methods: {
    handleInput(event) {
      console.log('当前值:', event.target.value);
    }
  }
}
</script>

自定义样式滑块

通过 CSS 覆盖原生样式实现自定义外观：

<template>
  <div class="custom-slider">
    <input 
      type="range" 
      v-model="sliderValue"
      min="0"
      max="100"
      class="slider"
    >
  </div>
</template>

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

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #ddd;
  outline: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #42b983;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #42b983;
  cursor: pointer;
}
</style>

使用第三方库 vue-slider-component

安装专业滑块组件库：

npm install vue-slider-component --save

实现示例：

<template>
  <vue-slider 
    v-model="value" 
    :min="0" 
    :max="100"
    :tooltip="'always'"
    :height="6"
    :dot-size="20"
    :process-style="{ backgroundColor: '#42b983' }"
  />
</template>

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

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

实现双向滑块（范围选择）

修改 vue-slider-component 配置：

<template>
  <vue-slider 
    v-model="rangeValue" 
    :min="0" 
    :max="100"
    :tooltip="'always'"
    :enable-cross="false"
    :lazy="true"
  />
</template>

<script>
import VueSlider from 'vue-slider-component'

export default {
  components: {
    VueSlider
  },
  data() {
    return {
      rangeValue: [20, 80]
    }
  }
}
</script>

添加刻度标记

在 vue-slider-component 中添加标记点：

用vue实现滑动输入条

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

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

以上方法提供了从简单到复杂的滑动输入条实现方案，可根据项目需求选择合适的实现方式。原生方案适合简单需求，而第三方组件则提供更丰富的功能和更好的自定义能力。

标签: vue