JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<div id="app">
  <!-- default props -->
  <vue-slider
    ref="slider"
    v-model="value"
    v-bind="options"
  ></vue-slider>
  <h1>{{ value }}</h1>
  <div class="btn-group">
    <button @click="$refs.slider.setValue(50)">setValue</button>
    <button @click="$refs.slider.setIndex(50)">setIndex</button>
    <button @click="log($refs.slider.getValue())">getValue</button>
    <button @click="log($refs.slider.getIndex())">getIndex</button>
  </div>
</div>
<script src="https://nightcatsama.github.io/vue-slider-component/dist/index.js"></script>

CSS

#app {
  margin: 50px;
}

JavaScript

new Vue( {
  el: '#app',
  data () {
    return {
    	value: 0,
      options: {
        eventType: 'auto',
        width: 'auto',
        height: 6,
        dotSize: 16,
        dotHeight: null,
        dotWidth: null,
        min: 0,
        max: 100,
        interval: 1,
        show: true,
        speed: 0.5,
        disabled: false,
        piecewise: false,
        piecewiseStyle: false,
        piecewiseLabel: false,
        tooltip: false,
        tooltipDir: 'top',
        reverse: false,
        data: null,
        clickable: true,
        realTime: false,
        lazy: false,
        formatter: null,
        bgStyle: null,
        sliderStyle: null,
        processStyle: null,
        piecewiseActiveStyle: null,
        piecewiseStyle: null,
        tooltipStyle: null,
        labelStyle: null,
        labelActiveStyle: null
      }
    }
  },
  methods: {
  	log (v) {
    	window.alert(v)
    }
  },
  mounted () {
  },
  components: {
    'vueSlider': window[ 'vue-slider-component' ],
  }
})