Skip to content
Circle slider component for Vue.js
Branch: master
Clone or download
Latest commit 5e51801 Aug 5, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config The very beginning May 18, 2017
dist fix mobile drag Jan 24, 2018
src fix mobile drag Jan 24, 2018
.babelrc The very beginning May 18, 2017
.eslintignore The very beginning May 18, 2017
.eslintrc.js The very beginning May 18, 2017
.gitignore Update .gitignore May 18, 2017
LICENSE Transfer repo to proper organization May 19, 2017
README.md Update README.md Aug 4, 2018
index.js The very beginning May 18, 2017
package-lock.json 1.0.2 Jan 24, 2018
package.json 1.0.2 Jan 24, 2018
yarn.lock The very beginning May 18, 2017

README.md

vue-circle-slider

npm npm vue2

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

License

MIT

You can’t perform that action at this time.