原生JS实现滑块功能

原生JS实现滑块功能

前两天用到ant-design的滑块组件，觉得很有意思，就自己简单实现了一下。 效果图如下： html代码

<div class="box">
    <div class="length"></div>
    <div class="tip"></div>
    <div class="light"></div>
  </div>

样式

.box {
      padding: 4px 0;
      width: 200px;
      height: 4px;
      position: relative;
      margin: 100px auto;
      cursor: pointer;
    }

    .box .length {
      width: 100%;
      height: 4px;
      background: gray;
      border-radius: 2px;
      cursor: pointer;
    }

    .box .tip {
      position: absolute;
      width: 10px;
      height: 10px;
      background: green;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 50%;
      left: 45px;
      z-index: 3;
      cursor: pointer;
    }

    .box .light {
      position: absolute;
      width: 45px;
      height: 4px;
      top: 50%;
      transform: translateY(-50%);
      background-color: aqua;
      cursor: pointer;
    }

javascript代码，也是核心部分

// 获取DOM
  let tip = document.querySelector('.tip'),
    light = document.querySelector('.light'),
    box = document.querySelector('.box')

  // 点击滑块的时候设置进度
  function positioning(val) {
    if (typeof val === 'number') {
      light.style.width = val + 'px'
      tip.style.left = val + 'px'
    } else {
      light.style.width = val.offsetX + 'px'
      tip.style.left = val.offsetX + 'px'
    }
  }

  // box点击的时候根据点击位置更改滑块进度
  box.addEventListener('click', positioning)
  // box鼠标按下的时候，除了更改滑块进度，同时监听documentElement的mousemove/mouseup事件
  box.addEventListener('mousedown', (ev) => {
    light.style.width = ev.offsetX + 'px'
    tip.style.left = ev.offsetX + 'px'
    box.addEventListener('mouseup', () => {
      document.documentElement.removeEventListener('mousemove', moving)
    })
    document.documentElement.addEventListener('mousemove', moving)
    document.documentElement.addEventListener('mouseup', () => {
      document.documentElement.removeEventListener('mousemove', moving)
    })
  })

  // 鼠标移动中
  function moving(ev) {
    ev.stopPropagation()
    // 判断鼠标移动位置是否已经超出了box的范围，从而设置滑块的进度
    if (ev.clientX <= box.offsetLeft) {
      positioning(0)
    } else if (ev.clientX >= box.offsetWidth + box.offsetLeft) {
      positioning(box.offsetWidth)
    } else {
      positioning(ev.clientX - box.offsetLeft)
    }
  }

以上代码可以拿来即用，如在使用时发现问题了，欢迎指出，^ _ ^