My times-slider Vue component which provides most comfortable way for user in time operation like selecting,filtering searching ,limiting, ..etc. Compatible with Vue 2.x and at last with Vue 3. Vue 2 is legacy now (according to Vue documentation). And all new versions begging with 1.0.17 will not be supported Vue 2 projects. For using it in Vue 2 feel free and follow vue2 branch of this repo. All below instructions is for Vue 3 projects only.
To view it online and parameters usage visit https://dhruuva.github.io/time-slider/
npm install times-slider --save<script>
import TimeSlider from 'times-slider'
export default {
name: 'TestPage',
components: {
TimeSlider
},
data () {
return {
curTime: "00:00"
}
},
methods:{
shiftTime(a) {
this.curTime=a
}
}
}
</script>Or use directly from a CDN
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/times-slider"></script>
<div id="app">
<p>{{curTime}}</p>
<div class="svgResponsive">
<time-slider v-on:currentTime="shiftTime($event)"></time-slider>
</div>
</div>
<script>
new Vue({
el: '#app',
components: {
TimeSlider
},
data: () => ({
curTime: "00:00"
}),
methods:{
shiftTime(a) {
this.curTime = a;
},
}
})
</script>Go first-look by Aleksey Bazhenov (@dhruuva) on CodePen.
pull requests for Fix bugs, doc errors, new style themes and also new features, suggestions for improvement write me ... welcome.
Copyright (c) 2025 Licensed under the MIT license.