SVG Based Circle Slider Component For Vue.js

SVG Based Circle Slider Component For Vue.js

A Vue.js component to generate a customizable circular slider for easier value selection.


npm npm vue2

Circle slider component for Vue.js

Table of contents


npm install --save vue-circle-slider

Adding into app

import Vue from 'vue'
import VueCircleSlider from 'vue-circle-slider'




  • svg based view
  • binding via v-model
  • defining min & max values
  • defining step size
  • animation while updating to new value on click by circle
  • touch devices support (touchmove)
  • sizes customization: exact and relative definitions
  • colors customization


Plugin will register a global component with name CircleSlider so you can just use it right away:

<circle-slider v-model="sliderValue"></circle-slider>

or customize some properties:




Props Type Default Description
side Number 100 size of a side of a svg square in px
min             Number       0 the minimum value
max Number 100 the maximum value
stepSize Number 1 the gap between the values
circleColor String #334860 color of slider circumference
progressColor String #00be7e color of progress curve
knobColor String #00be7e knob color
knobRadius Number null exact knob radius in px
knobRadiusRel   Number       7       relative knob radius. radius value in px will be calculated as (side/2) / knobRadiusRel
circleWidth Number null exact width of circle in px
circleWidthRel Number 20 relative circle width. width value in px will be calculated as (side/2) / circleWidthRel
progressWidth Number null exact progress curve width in px
progressWidthRel Number 10 relative progress curve width. width value in px will be calculated as (side/2) / progressWidthRel


Name Params Description
touchmove none fires on touch devices


There is no any slots available



  • add plugin options for defining custom defaults via Vue.use(VueCircleSlider, options)
    • globalComponent[Boolean] - enable/disable global component registration
    • componentName[String] - ability to define custom name for component
    • options with defaults for all props (with same names)
  • add limitMin and limitMax props to limit an accessible slider range



Github Repository

Tags: #VueJs