JSFiddle - React, Tailwind, and code Playground

by Soviut

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;
}

.vue-slider-dot-handle {
  background-color: blue !important;
  border: solid 2px white;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5) !important;
}

JavaScript

new Vue( {
  el: '#app',
  data () {
    return {
    	value: 0,
    	      options: {
    	        dotSize: 14,
    	        width: 'auto',
    	        height: 4,
    	        contained: false,
    	        direction: 'ltr',
    	        data: null,
    	        min: 0,
    	        max: 100,
    	        interval: 1,
    	        disabled: false,
    	        clickable: true,
    	        duration: 0,
    	        adsorb: false,
    	        lazy: false,
    	        tooltip: false,
    	        tooltipPlacement: 'top',
    	        tooltipFormatter: void 0,
    	        useKeyboard: true,
    	        keydownHook: null,
    	        dragOnClick: false,
    	        enableCross: true,
    	        fixed: false,
    	        minRange: void 0,
    	        maxRange: void 0,
    	        order: true,
    	        marks: false,
    	        dotOptions: void 0,
    	        process: true,
    	        dotStyle: void 0,
    	        railStyle: void 0,
    	        processStyle: void 0,
    	        tooltipStyle: void 0,
    	        stepStyle: void 0,
    	        stepActiveStyle: void 0,
    	        labelStyle: void 0,
    	        labelActiveStyle: void 0,
    	      }
    }
  },
  methods: {
  },
  mounted () {
  },
  components: {
    'vueSlider': window[ 'vue-slider-component' ],
  }
})