- 利用**原生js**并且 以**面向对象**方式实现 Slider滑块的 **开启范围选择用法** - 模拟组件封装要求: 初始化的时候考虑以下参数 + ele: 绑定元素选择器(就是滑块的容器) + min: 滑块的最小值 + max: 滑块的最大值 + value: 滑块初始值。值为数组，表示开始和结尾的区间,如： value: [30, 60] + setTips: 滑块拖拽时设置提示文本的回调函数。并返回当前的 value 参数 + done : 滑块拖拽完毕的回调函数。并返回当前的 value 参数。滑块拖动过程中不会触发。 - 注意: 滑块拖拽完毕后的提示弹窗使用 alert 模拟

以下是使用原生JavaScript以面向对象方式实现Slider滑块的开启范围选择用法的示例代码：

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}`);
  }
});

在上述示例中，我们通过`class Slider`定义了一个Slider类，构造函数中接收了`options`对象作为参数，包含了初始化Slider时的各种配置信息。在`init`方法中，我们创建了滑块的DOM元素，并添加了相应的事件监听器。通过`updateSlider`方法更新滑块的位置和宽度。

在拖动滑块过程中，会触发`handleDragging`方法来更新滑块的值和位置，并通过`setTips`方法设置提示文本。当拖动结束时，会触发`stopDragging`方法，其中会调用`done`方法进行回调，并使用`alert`模拟提示弹窗。

你可以根据需要修改样式和事件处理逻辑。