Vue-Round-Slider boilerplate

A round slider component for Vue JS, that also supports range slider. Offering various circle shapes includes pie, half or semi circle, quarter and arc slider.

by Soundar Pandian

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-roundslider.min.js"></script>
<div id="app">
  <h1>
    <a href="https://vue.roundsliderui.com/" target="_blank">
      Vue-Round-Slider [v{{version}}]
     </a>
  </h1>

  <!-- Vue Round Slider -->
  <round-slider
    v-model="sliderValue">
  </round-slider>
  <!-- === -->

  <div class="row">
    <div class="col">
      <h2>Text Element</h2>
      <div>{{sliderValue}}</div>
    </div>
    <div class="col">
      <h2>Input Element</h2>
      <input v-model="sliderValue" />
    </div>
  </div>
  
</div>

CSS

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
}
a {
  color: #42b983;
}
.rs-control {
  margin: 0 auto;
}
.row {
  display: flex;
}
.col {
  width: 100%;
}

Vue

new Vue({
  el: "#app",
  computed: {
  	version() {
    	return Vue.options.components.RoundSlider.options.version;
    }
  },
  data: {
    sliderValue: 60
  }
})