<div class="table">

  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>

</div>
<div class="slide">
      <svg version="1.1" id="wave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 119 26" style="width:40px;height:9px;position:relative;top:-7px;">
          <path class="path" d="M120.8,26C98.1,26,86.4,0,60.4,0C35.9,0,21.1,26,0.5,26H120.8z" fill="#eee"></path>
        </svg>
</div>

body
  background rgb(242,242,242)
  margin-left 20px
  top 40px
  
.table
  background #fff
  display inline-block
  position relative
  padding 40px
  padding-bottom 5px
  span
    padding 0 10px
    position relative
    opacity 0.3
.slide
  width 40px
  // border 1px solid #bbb
  height @width
  background transparent
  position relative
  top -10px
  &:before,&:after
    content ''
    border-radius 50%
    position absolute
    top 50%
    left 50%
    transform translate(-50%, -50%)
    display block
  &:after
    background rgb(25,176,56)
    width 10px
    height 10px
  &:before
    box-shadow 2px 2px 10px #888
    width 20px
    height @width
    background #fff

let slide = document.querySelector('.slide')

const slideWidth = parseInt(getComputedStyle(slide).width)// 滑块的宽度

let labels = Array.from(document.querySelectorAll('.table span'))
labels = labels.map(function(el, index){
  return {
    el: el,
    left: el.offsetLeft + 11
  }
})

slide.addEventListener('mousedown', function(e){
  e.preventDefault()
  let left = parseInt(slide.style.left) || 0
  let startX = e.clientX
  // slider能移动的最远距离
  let maxLength = document.querySelector('.table').getBoundingClientRect().width - slideWidth
  function move(e){
    e.preventDefault()
    let moveX = e.clientX - startX
    if(left + moveX < 0 || left + moveX > maxLength) {
      return
    }
    newLeft = left + moveX
    let newCenterLeft = newLeft + slideWidth / 2
    slide.style.left = newLeft + 'px'
    // 控制数字的上升和下降
    // console.log('========') 
    for(let label of labels){
       //  判断label 的left和中心点的距离
      let dist = label.left - newCenterLeft
      // console.log(label.left, newCenterLeft)
      if(Math.abs(dist) <= slideWidth / 2){
        // console.log(dist)
        label.el.style.top = -(26/60)*(20 - Math.abs(dist)) + 'px'
        label.el.style.opacity = 0.3 + Math.abs(1 - dist / (slideWidth / 2)) * 0.7
      } else {
        label.el.style.top = '0px'
        label.el.style.opacity = 0.3
      }
    }
  }
  document.addEventListener('mousemove', move)
  
  document.addEventListener('mouseup', function(){
    document.removeEventListener('mousemove', move)
  })
})