JSFiddle - React, Tailwind, and code Playground

by ghostoy

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>
  <a target="_blank" href="https://nightcatsama.github.io/vue-slider-component">Document</a>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-slider-component@latest/theme/default.css">
<script src="https://cdn.jsdelivr.net/npm/vue-slider-component@latest/dist/vue-slider-component.umd.min.js"></script>

CSS

#app {
  margin: 50px;
}

JavaScript

new Vue( {
  el: '#app',
  data () {
    return {
    	value: 0.123423,
      options: {
        min: 0,
        max: 25.75,
        interval: 0.05,
        tooltip: 'focus',
        width: 60,
        dotSize: 12,
        tooltipFormatter: v => `${Math.round(v * 100)} %`
      }
    }
  },
  methods: {
  },
  mounted () {
  },
  components: {
    'vueSlider': window[ 'vue-slider-component' ],
  }
})