vue-range-slider

Custom width and height

by xwpongithub

HTML

<link rel="stylesheet" href="https://unpkg.com/vue-range-component@1.0.2/dist/vue-range-slider.min.css">
<script src="https://unpkg.com/vue-range-component@1.0.2/dist/vue-range-slider.min.js"></script>
<div id="app">
  <div class="app-content">
    <vue-range-slider v-model="value" :width="width" :height="height"></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
    }
  },
  created() {
    this.width = window.innerWidth / 2
    this.height = 12
  }
}).$mount('#app')