vue实现滑块
Vue 实现滑块组件的方法
使用原生 HTML 和 Vue 数据绑定
通过 v-model 绑定滑块的值，结合 input 事件更新数据：
<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() {
console.log('当前值:', this.sliderValue);
}
}
}
</script>使用第三方库（如 vue-slider-component）
安装 vue-slider-component：
npm install vue-slider-component --save示例代码：
<template>
<vue-slider
v-model="value"
:min="0"
:max="100"
:interval="10"
/>
</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 覆盖原生滑块样式：
<template>
<input
type="range"
class="custom-slider"
v-model="value"
/>
</template>
<style>
.custom-slider {
-webkit-appearance: none;
width: 100%;
height: 8px;
background: #ddd;
outline: none;
}
.custom-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #42b983;
cursor: pointer;
border-radius: 50%;
}
</style>实现双向绑定与验证
结合计算属性实现值的验证：
export default {
data() {
return {
rawValue: 0
}
},
computed: {
sliderValue: {
get() {
return this.rawValue
},
set(val) {
if (val >= 0 && val <= 100) {
this.rawValue = val
}
}
}
}
}垂直方向滑块
通过 CSS 旋转实现垂直滑块：
.vertical-slider {
transform: rotate(270deg);
width: 100px;
margin-top: 50px;
}注意：实际开发中应根据需求选择合适方案，第三方组件通常提供更丰富的功能如标记点、分段颜色等。
