Sota-vue-circle-slider NPM

vue-circle-slider

Circle slider component for Vue.js

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)
- globalComponentBoolean - enable/disable global component registration
- componentNameString - 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