vue-circle-slider


Circle slider component for Vue.js

Table of contents

- Installation
- Usage
- Demo
- TODO intentions

Installation

``
npm install --save vue-circle-slider
`

Adding into app

`javascript
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:

`html
...

...
`

or customize some properties:

`html
...
v-model="sliderValue"
:side="150"
:min="0"
:max="10000"
:step-size="100"
:circle-width-rel="20"
:progress-width-rel="10"
:knob-radius="10"
>
...
`

Interface

$3

| 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 |

$3

| Name | Params | Description |
| --------------|:--------------|--------------|
| touchmove | none | fires on touch devices |

$3

There is no any slots available

Demo

- Working demo
- Demo sources

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 limitMin and limitMax` props to limit an accessible slider range

---

License

MIT