利用**原生js**并且 以**面向对象**方式实现 Slider滑块的 **开启范围选择用法** - 模拟组件封装要求: 初始化的时候考虑以下参数 + ele: 绑定元素选择器(就是滑块的容器) + min: 滑块的最小值 + max: 滑块的最大值 + value: 滑块初始值。值为数组,表示开始和结尾的区间,如: value: [30, 60] + setTips: 滑块拖拽时设置提示文本的回调函数。并返回当前的 value 参数 + done : 滑块拖拽完毕的回调函数。并返回当前的 value 参数。滑块拖动过程中不会触发。 - 注意: 滑块拖拽完毕后的提示弹窗使用 alert 模拟 写出完整代码渲染到页面上
时间: 2023-08-11 08:05:58 浏览: 41
以下是使用原生JavaScript以面向对象方式实现Slider滑的开启范围选择用法,并将其完整代码渲染到页面上的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Slider滑块</title>
<style>
.slider-container {
width: 300px;
height: 20px;
background-color: #f0f0f0;
position: relative;
}
.slider-range {
height: 100%;
background-color: #007bff;
position: absolute;
top: 0;
left: 0;
}
.slider-thumb {
width: 20px;
height: 20px;
background-color: #fff;
border: 1px solid #007bff;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
</style>
</head>
<body>
<div class="slider-container"></div>
<script>
class Slider {
constructor(options) {
this.ele = document.querySelector(options.ele);
this.min = options.min;
this.max = options.max;
this.value = options.value || [this.min, this.max];
this.setTips = options.setTips || null;
this.done = options.done || null;
this.sliderRange = null;
this.sliderThumbStart = null;
this.sliderThumbEnd = null;
this.draggingStart = false;
this.draggingEnd = false;
this.init();
}
init() {
this.createSlider();
this.updateSlider();
this.sliderThumbStart.addEventListener('mousedown', this.startDraggingStart.bind(this));
this.sliderThumbEnd.addEventListener('mousedown', this.startDraggingEnd.bind(this));
document.addEventListener('mousemove', this.handleDragging.bind(this));
document.addEventListener('mouseup', this.stopDragging.bind(this));
}
createSlider() {
this.sliderRange = document.createElement('div');
this.sliderRange.classList.add('slider-range');
this.sliderThumbStart = document.createElement('div');
this.sliderThumbStart.classList.add('slider-thumb');
this.sliderThumbStart.classList.add('slider-thumb-start');
this.sliderThumbEnd = document.createElement('div');
this.sliderThumbEnd.classList.add('slider-thumb');
this.sliderThumbEnd.classList.add('slider-thumb-end');
this.ele.appendChild(this.sliderRange);
this.ele.appendChild(this.sliderThumbStart);
this.ele.appendChild(this.sliderThumbEnd);
}
updateSlider() {
const rangeWidth = this.ele.clientWidth;
const startPercentage = ((this.value[0] - this.min) / (this.max - this.min)) * 100;
const endPercentage = ((this.value[1] - this.min) / (this.max - this.min)) * 100;
this.sliderRange.style.left = `${startPercentage}%`;
this.sliderRange.style.width = `${endPercentage - startPercentage}%`;
}
startDraggingStart() {
this.draggingStart = true;
}
startDraggingEnd() {
this.draggingEnd = true;
}
handleDragging(event) {
if (this.draggingStart || this.draggingEnd) {
const rangeWidth = this.ele.clientWidth;
const startX = this.ele.getBoundingClientRect().left;
const endX = startX + rangeWidth;
let newValue;
if (this.draggingStart) {
newValue = ((event.clientX - startX) / rangeWidth) * (this.max - this.min) + this.min;
if (newValue < this.min) {
newValue = this.min;
} else if (newValue > this.value[1]) {
newValue = this.value[1];
}
this.value[0] = newValue;
this.updateSlider();
}
if (this.draggingEnd) {
newValue = ((event.clientX - startX) / rangeWidth) * (this.max - this.min) + this.min;
if (newValue > this.max) {
newValue = this.max;
} else if (newValue < this.value[0]) {
newValue = this.value[0];
}
this.value[1] = newValue;
this.updateSlider();
}
if (typeof this.setTips === 'function') {
this.setTips(this.value);
}
}
}
stopDragging() {
if (this.draggingStart || this.draggingEnd) {
this.draggingStart = false;
this.draggingEnd = false;
if (typeof this.done === 'function') {
this.done(this.value);
}
alert(`当前的value参数为:${this.value}`);
}
}
}
// 使用示例
const slider = new Slider({
ele: '.slider-container',
min: 0,
max: 100,
value: [30, 60],
setTips: (value) => {
console.log(`当前的value参数为:${value}`);
},
done: (value) => {
console.log(`滑块拖拽完毕,当前的value参数为:${value}`);
}
});
</script>
</body>
</html>
```
将以上代码保存为一个HTML文件,并在浏览器中打开该文件,即可看到渲染出来的Slider滑块。你可以根据需要修改样式和事件处理逻辑。