vue3 滑块带区间 还有滑动进度条按钮
时间: 2025-05-11 12:15:14 浏览: 26
### Vue3 实现区间滑块组件
Vue3 中可以通过 `v-model` 和事件监听来实现一个带有区间的滑块组件。以下是基于原生 HTML `<input type="range">` 的扩展实现方式:
#### 区间滑块组件示例
```vue
<template>
<div class="slider-container">
<input
type="range"
v-model="minValue"
:max="max"
@change="updateRange" />
<input
type="range"
v-model="maxValue"
:min="min"
@change="updateRange" />
<div class="track">
<div class="fill" :style="{ left: minPercent, width: rangeWidth }"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
minValue: 20,
maxValue: 80,
min: 0,
max: 100,
};
},
computed: {
minPercent() {
return `${(this.minValue / this.max) * 100}%`;
},
rangeWidth() {
const diff = (this.maxValue - this.minValue);
return `${(diff / this.max) * 100}%`;
}
},
methods: {
updateRange() {
if (this.minValue > this.maxValue) {
[this.minValue, this.maxValue] = [this.maxValue, this.minValue];
}
}
}
};
</script>
<style scoped>
.slider-container { position: relative; margin-top: 20px; }
.track { height: 5px; background-color: #ccc; border-radius: 5px; position: relative; }
.fill { height: 100%; background-color: blue; position: absolute; top: 0; border-radius: inherit; }
</style>
```
上述代码实现了两个滑块分别控制范围的上下限,并通过样式动态调整填充区域[^1]。
---
### Vue3 滑动进度条按钮示例
对于带按钮的滑动进度条,可以利用鼠标拖拽事件或者触摸事件来模拟交互行为。以下是一个简单的实现方案:
#### 进度条滑动按钮示例
```vue
<template>
<div class="progress-bar" @mousedown="startDrag" @touchstart="startDrag">
<div class="bar-fill" :style="{ width: progress + '%' }"></div>
<div class="handle" :style="{ left: progress + '%' }"></div>
</div>
</template>
<script>
export default {
data() {
return {
isDragging: false,
startX: 0,
startProgress: 0,
progress: 50,
};
},
methods: {
startDrag(event) {
event.preventDefault();
this.isDragging = true;
this.startX = this.getEventPosition(event);
this.startProgress = this.progress;
document.addEventListener('mousemove', this.onDrag);
document.addEventListener('mouseup', this.stopDrag);
document.addEventListener('touchmove', this.onDrag);
document.addEventListener('touchend', this.stopDrag);
},
onDrag(event) {
if (!this.isDragging) return;
const deltaX = this.getEventPosition(event) - this.startX;
const containerWidth = this.$el.offsetWidth;
let newProgress = Math.round((deltaX / containerWidth) * 100 + this.startProgress);
if (newProgress < 0) newProgress = 0;
if (newProgress > 100) newProgress = 100;
this.progress = newProgress;
},
stopDrag() {
this.isDragging = false;
document.removeEventListener('mousemove', this.onDrag);
document.removeEventListener('mouseup', this.stopDrag);
document.removeEventListener('touchmove', this.onDrag);
document.removeEventListener('touchend', this.stopDrag);
},
getEventPosition(event) {
return 'touches' in event ? event.touches[0].clientX : event.clientX;
}
}
};
</script>
<style scoped>
.progress-bar { position: relative; width: 100%; height: 10px; background-color: #ddd; cursor: pointer; }
.bar-fill { height: 100%; background-color: green; transition: width 0.2s ease-in-out; }
.handle { position: absolute; width: 20px; height: 20px; background-color: white; border: 2px solid black; border-radius: 50%; transform: translate(-50%, -50%); z-index: 1; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
</style>
```
此代码片段展示了如何创建一个可拖动的进度条按钮,并支持触屏设备上的手势操作[^2]。
---
### 结合 uni-app 场景下的优化建议
如果目标是在 uni-app 平台上运行这些组件,则需要注意跨端兼容性问题。例如,在 H5、小程序和 App 上可能需要额外处理不同环境中的事件差异。推荐使用 uni-app 提供的标准 API 来替代部分 DOM 操作逻辑,从而提升多端一致性。
---
阅读全文
相关推荐


















