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

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

• 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