vue-range-slider

Custom process,tooltip,background

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 :bg-style="bgStyle" :tooltip-style="tooltipStyle" :process-style="processStyle" v-model="value"></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.bgStyle = {
     backgroundColor: '#fff',
     boxShadow: 'inset 0.5px 0.5px 3px 1px rgba(0,0,0,.36)'
    }
    this.tooltipStyle = {
      backgroundColor: '#666',
      borderColor: '#666'
    }
    this.processStyle = {
      backgroundColor: '#999'
    }
  }
}).$mount('#app')