Vue slider component RANGE

HTML

<div id="app">
  <vue-slider
    ref="slider"
    v-model="value"
    v-bind="options"
  ></vue-slider>
  <h1>{{ value }}</h1>
  <button @click="log($refs.slider.getValue())">Output Value</button>
</div>
<script src="https://nightcatsama.github.io/vue-slider-component/dist/index.js"></script>

CSS

#app {
  margin: 50px;
}

h1 { 
  text-align: center;
}

Vue

new Vue( {
  el: '#app',
  data () {
    return {
    	value: [0, 50],
      options: {
        eventType: 'auto',
        width: 'auto',
        height: 10,
        dotSize: 16,
        min: 0,
        max: 100,
        interval: 1,
        show: true,
        speed: 1,
        tooltipDir: 'top',
      }
    }
  },
  methods: {
  	log (v) {
    	window.alert(v)
    }
  },
  components: {
    'vueSlider': window[ 'vue-slider-component' ],
  }
})