vue-range-slider

Lazy for async

by Ea Bangalore

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-range-slider.min.css">
<script src="https://unpkg.com/[email protected]/dist/vue-range-slider.min.js"></script>
<div id="app">
  <div class="app-content">
    <vue-range-slider v-model="value" :min="min" :max="max" step="0.1" :enable-cross="enableCross" @slide-end="sliding($event)" :piecewise="true">
      <li>Hellow workd</li>
    </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
  },
  methods:{
     sliding(steps){
       console.log('steps',steps);
    }
  },
}).$mount('#app')