Circle slider component for Vue.js
npm install vue-circle-slider



Circle slider component for Vue.js
- Installation
- Usage
- Demo
- TODO intentions
```
npm install --save vue-circle-slider
`javascript
import Vue from 'vue'
import VueCircleSlider from 'vue-circle-slider'
Vue.use(VueCircleSlider)
`
- svg based view
- binding via v-modeltouchmove
- defining min & max values
- defining step size
- animation while updating to new value on click by circle
- touch devices support ()
- 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:
`html`
...
...
or customize some properties:
`html`
...
:side="150"
:min="0"
:max="10000"
:step-size="100"
:circle-width-rel="20"
:progress-width-rel="10"
:knob-radius="10"
>
...
| 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 |#00be7e
| progressColor | String | | color of progress curve |#00be7e
| knobColor | String | | knob color |(side/2) / knobRadiusRel
| knobRadius | Number | null | exact knob radius in px |
| knobRadiusRel | Number | 7 | relative knob radius. radius value in px will be calculated as |(side/2) / circleWidthRel
| 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) / progressWidthRel
| progressWidth | Number | null | exact progress curve width in px |
| progressWidthRel | Number | 10 | relative progress curve width. width value in px will be calculated as |
| 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)limitMin
- 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 and limitMax` props to limit an accessible slider range
---