JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-slider-component@latest/theme/default.css">
</head>
<body>
<div id="app">
{{message}}
<br />
<vue-slider :data="datas" v-model="vvalue"  :marks="true"></vue-slider>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

<script src="https://cdn.jsdelivr.net/npm/vue-slider-component@latest/dist/vue-slider-component.umd.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data:{
        message:'hi there , please choose your time',
        vvalue:'30',
        datas:['30','45','1:00','1:30']
    },
    components: {
      VueSlider: window['vue-slider-component']
    }
  })
</script>

</body>
</html>