vue 多区间选择

<template>
  <div class="sliderBox">
    <div class="slider-container theme-green" ref="sliderBar" :style="{width:sliderWidth+'px'}">
      <div class="back-bar">
        <div v-for="(item,index) in barList" :key="index" @mousedown="drag(index)">
          <div class="pointer" :style="{left:item.left+'px',zIndex:item.zIndex}"></div>
          <div :class="`colorBar${index}`" class="color" :style="{width:item.width+'px',left:barList[index].wLeft + 'px'}"></div>
          <div class="pointer-label" :style="{left:item.left+'px'}">
            <div class="content">{
  {showList[index]}}</div>
            <div class="arrow"></div>
          </div>
        </div>
      </div>
    </div>
    <b-btn class="btn"  variant="primary" @click="range" style="width:70px">查询</b-btn>
  </div>
</template>

<script>
export default {
  name: 'ScrollBar',
  data () {
    return {
      sumlist: [0, 0.1, 0.3, 0.5, 1, 2, 3, 5, 7, 10, 15, 20, 25, 30, 40, 50, 60, 80, 100, 120, 140, 160, 180, 200,
        250, 300, 350, 400, 450, 500, 600, 700, 800, 900, 1000, 1500, 2000, 5000, 10000],
      showList: ['2万', '15万', '50万', '140万', '300万', '600万', '1500万', '10000万'],
      sliderWidth: 787, // bar的宽度14px  20px为一个分割
      zIndex: 2,
      bar: 14, // bar的宽度14px
      singleRange: 20, // 单个区间的宽度
      standardData: [5, 10, 15, 20, 25, 30, 35, 38], // 传值给后台的数据 20px 为1
      barList: [{
        left: 93,
        width: 93,
        w