Vue.js Circular Time Range Picker

In this post I ma going to share simple Vue Component for selecting time range. This Vue.js component is helpful to select the time intervals of the day.


Install component via NPM

npm install vue-time-ranges-picker


Use following template to display Vue.js Circular Time Range Picker

    <div class="time-picker-wrapper">


Call the component and enable time picker

import VueTimeRangesPicker from 'vue-time-ranges-picker';
export default {
  components: {
  data() {
    return {
      ranges: [
          startTime: '00:00',
          endTime: '03:00',
          scaleColor: 'violet',
          startTime: '03:00',
          endTime: '06:00',
          scaleColor: 'yellow',
          startTime: '06:00',
          endTime: '00:00',
          scaleColor: 'aquamarine',


Styling time picker

.time-picker-wrapper {
  width: 300px;


If you want to use this component in browser which doesn’t support pointer events, then enable polyfill. For example,you can add this script in the header of your html page

You cal also use following to properties to customize the plugins.

  isShowChosenTime: true,
  isShowQuartersText: true,
  isShowHoursMarks: true,
  chosenTimeColor: 'grey',
  pointerColor: 'white',
  activePointerColor: 'rgba(240, 240, 240, 0.9)',
  pointerRadius: 6,
  activePointerRadius: 5.5,
  circleStrokeWidth: 8,
  hoursMarksColor: 'grey',
  quarterTextColor: 'grey',

See live demo and download source code.


This awesome plugin is developed by alex-knyazev. Visit their official github repository for more information and follow for future updates.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.