1.先看效果图

image

2. 下面就是跟着github上面的包一步步来了

https://github.com/NightCatSama/vue-slider-component

npm install vue-slider-component --save

2.1 在项目中引入

2.2 代码及遇到的坑

<template>
  <div class="slider-box" style="margin-top: 150px">
    <section data-title="Formatter" id="demo3">
      <div>
        <vue-slider ref="slider3" v-bind="demo.demo8" v-model="demo.demo8.value">
          <template slot="label" slot-scope="{ label, active }">
            <span :class="['custom-label', { active }]" v-if="label % 10 === 0">
              {{ label }}
            </span>
          </template>
        </vue-slider>
        <h3><small>Value: </small>{{ demo.demo8.value }}</h3>
        <div class="btn-group">
          <button @click="setValue('demo8', [100, 200])">set value = [100, 200]</button>
          <button @click="setIndex('slider3', 250)">set index = 250</button>
          <button @click="getValue('slider3')">getValue()</button>
          <button @click="getIndex('slider3')">getIndex()</button>
        </div>
      </div>
      <div>
      </div>
    </section>
  </div>
</template>
<script>
import vueSlider from 'vue-slider-component';

export default {
  components: {
    vueSlider
  },
  data () {
    return {
      demo: {
        demo3: {
          value: [0, 100],
          width: '100%',
          height: 8,
          dotSize: 16,
          min: 0,
          max: 500,
          disabled: false,
          show: true,
          useKeyboard: true,
          tooltip: 'always',
          tooltipDir: [
            "bottom",
            "top"
          ],
          formatter: '¥{value}',
          enableCross: false,
          mergeFormatter: '¥{value1} ~ ¥{value2}',
          bgStyle: {
            backgroundColor: '#fff',
            boxShadow: 'inset 0.5px 0.5px 3px 1px rgba(0,0,0,.36)'
          },
          tooltipStyle: {
            backgroundColor: '#666',
            borderColor: '#666'
          },
          processStyle: {
            backgroundColor: '#999'
          },
          piecewiseLabel: true,
          width: "100%",
          show: true
        },
        demo8: {
          width: '100%',
          show: true,
          value: [0, 100],
          min: 0,
          max: 100,
          piecewiseLabel: true,
          tooltip: 'always',
          tooltipDir: [
            "bottom",
            "top"
          ]
        }
      },
      diy_tooltip: '',
      diy_label: ''
    }
  },
  methods: {
    format (value) {
      return value === null ? 'null' : (typeof value === 'string' ? `"${value}"` : value)
    },
    // 有时候在tab 下面引用 会有个坑，滚动条不能动，这时候就需要在created 里面跑下面这个方法
    refreshSlider (val) {
      this.$nextTick(() => {
        this.$refs.slider3.refresh()
      })
    },
    // 下面 的方法都不是必须的
    setDisabled (name) {
      let obj = this.demo[name]
      obj.disabled = !obj.disabled
    },
    setTooltip (name) {
      let obj = this.demo[name]
      obj.tooltip = obj.tooltip === 'hover' ? 'always' : 'hover'
    },
    setValue (name, num) {
      let obj = this.demo[name]
      obj.value = num
    },
    setIndex (name, num) {
      let slider = this.$refs[name]
      slider.setIndex(num)
    },
    getValue (name) {
      let slider = this.$refs[name]
      alert(slider.getValue())
    },
    getIndex (name) {
      let slider = this.$refs[name]
      alert(slider.getIndex())
    },
    dragStart () {
      this.demo.demo5.speed = 0
    },
    dragEnd () {
      this.demo.demo5.speed = 0.5
    },
    cb (val) {
      console.log(val)
    }
  },
}
</script>

<style>
.slider-box {
  width: 400px;
  margin: 150px auto;
}
.custom-label {
  position: absolute;
  bottom: 100%;
  left: 0;
  transform: translate(-50%, -12px);
  margin-left: 3px;
}
.custom-label::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 5px);
  width: 1px;
  height: 5px;
  background-color: #000;
}

.custom-label.active {
  color: #2980b9;
  font-weight: bold;
}
.custom-label.active::after {
  background-color: #2980b9;
  width: 2px;
}
</style>