vue-circle-slider
Circle slider component for Vue.js
Table of contents
Installation
npm install --save vue-circle-slider Adding into app
import Vue from 'vue' import VueCircleSlider from 'vue-circle-slider' Vue.use(VueCircleSlider)Usage
Functionality
- 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
Examples
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> ...Interface
Props
| 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 |
Events
| Name | Params | Description |
|---|---|---|
| touchmove | none | fires on touch devices |
Slots
There is no any slots available
Demo
TODO
- 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
limitMinandlimitMaxprops to limit an accessible slider range
