实现一个类似element ui 的 el-slider

可以使用 HTML、CSS 和 JavaScript 实现一个类似 Element UI 的滑块组件。以下是一个简单的示例：

HTML：

<div class="el-slider">
  <div class="el-slider__bar"></div>
  <div class="el-slider__button"></div>
</div>

CSS：

.el-slider {
  position: relative;
  height: 6px;
  width: 100%;
  background-color: #e5e5e5;
}

.el-slider__bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  width: 100%;
  background-color: #409EFF;
}

.el-slider__button {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

JavaScript：

const slider = document.querySelector('.el-slider');
const bar = slider.querySelector('.el-slider__bar');
const button = slider.querySelector('.el-slider__button');
let isDragging = false;

function updateButtonPosition(percent) {
  button.style.left = `${percent}%`;
}

function updateBarWidth(percent) {
  bar.style.width = `${percent}%`;
}

function updateValue(percent) {
  const min = parseFloat(slider.getAttribute('data-min')) || 0;
  const max = parseFloat(slider.getAttribute('data-max')) || 100;
  const value = (max - min) * percent / 100 + min;
  slider.setAttribute('data-value', value);
  slider.dispatchEvent(new Event('input'));
}

function handleMouseDown(event) {
  isDragging = true;
}

function handleMouseMove(event) {
  if (isDragging) {
    const rect = slider.getBoundingClientRect();
    const percent = Math.max(0, Math.min(100, (event.clientX - rect.left) / rect.width * 100));
    updateButtonPosition(percent);
    updateBarWidth(percent);
    updateValue(percent);
  }
}

function handleMouseUp(event) {
  isDragging = false;
}

button.addEventListener('mousedown', handleMouseDown);
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);

以上代码实现了一个基本的滑块组件，可以拖动滑块按钮来改变其值，并且会触发 `input` 事件。需要注意的是，这里使用了 `data-min` 和 `data-max` 属性来设置滑块的最小值和最大值，使用了 `data-value` 属性来设置当前的值（通过 `input` 事件更新）。可以在 HTML 中动态设置这些属性来初始化滑块组件。