Circle slider component for Vue.js
npm install --save vue-circle-slider
import Vue from 'vue'
import VueCircleSlider from 'vue-circle-slider'
Vue.use(VueCircleSlider)
v-model
touchmove
)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:
...
<circle-slider
v-model="sliderValue"
:side="150"
:min="0"
:max="10000"
:step-size="100"
:circle-width-rel="20"
:progress-width-rel="10"
:knob-radius="10"
></circle-slider>
...
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
Vue.use(VueCircleSlider, options)
limitMin
and limitMax
props to limit an accessible slider range