vue-range-slider

Tooltip formatter and tooltipMerge

by xwpongithub

HTML

<link rel="stylesheet" href="https://unpkg.com/vue-range-component@1.0.3/dist/vue-range-slider.min.css">
<script src="https://unpkg.com/vue-range-component@1.0.3/dist/vue-range-slider.min.js"></script>
<div id="app">
  <div class="app-content">
    <vue-range-slider v-model="value" :min="min" :max="max" :formatter="formatter" :tooltip-merge="tooltipMerge" :enable-cross="enableCross"></vue-range-slider>
  </div>
</div>

CSS

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.app-content {
  padding:40px 15px;
}

Vue

new Vue({
  data() {
    return {
      value: [0, 100]
    }
  },
  created() {
    this.min = 0
    this.max = 250
    this.enableCross = false
    this.tooltipMerge = false
    this.formatter = value => `￥${value}`
  }
}).$mount('#app')