Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including vue-circle-slider with all npm packages installed. Try it out:

var vueCircleSlider = require("vue-circle-slider")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-circle-slider v1.0.2

Circle slider component for Vue.js

vue-circle-slider

vue2 build npm npm build

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

PropsTypeDefaultDescription
sideNumber100size of a side of a svg square in px
minNumber0the minimum value
maxNumber100the maximum value
stepSizeNumber1the gap between the values
circleColorString#334860color of slider circumference
progressColorString#00be7ecolor of progress curve
knobColorString#00be7eknob color
knobRadiusNumbernullexact knob radius in px
knobRadiusRelNumber7relative knob radius. radius value in px will be calculated as (side/2) / knobRadiusRel
circleWidthNumbernullexact width of circle in px
circleWidthRelNumber20relative circle width. width value in px will be calculated as (side/2) / circleWidthRel
progressWidthNumbernullexact progress curve width in px
progressWidthRelNumber10relative progress curve width. width value in px will be calculated as (side/2) / progressWidthRel

Events

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free