VueCircleControlSlider

It is Circle Control Slider component for Vue.js based on SVG view.

Table of contents

• Installation
• Usage
• Demo

Installation

npm install --save vue-circle-control-slider

Usage

adding into main.js (global registration)

import Vue from 'vue'
import VueCircleControlSlider from 'vue-circle-control-slider'
import 'vue-circle-control-slider/dist/VueCircleControlSlider.css'
Vue.component('VueCircleControlSlider', VueCircleControlSlider); //global registration

or adding into your vue component (local registration)

<script>
import VueCircleControlSlider from 'vue-circle-control-slider'
export default{
    //*...some code...*//
    components: {
        //*...other components...*//
        VueCircleControlSlider //local registration in your component
    }
}
</script>

Functionality

• svg based view
• 2 way binding data value
• defining min & max values
• defining step size
• animation while updating to new value on click by circle
• touch devices support (touchmove)
• available disabled events
• sizes customization: exact and relative definitions
• colors customization

Examples

When you have been register component with name VueCircleControlSlider so you can just use it right away:

...
<vue-circle-control-slider :value="pushSomeValue"/>
<vue-circle-control-slider @value="receiveSomeValue"/>
...

or customize some properties:

...
<vue-circle-control-slider
  :size="300"
  :min="0"
  :max="100"
  circleColor="black"
  progressColor="red"
  :knobRadius="20"
  :progressWidth="10"
  dial
  sign="%"
  dialTextColor="red"
/>
...

Interface

Props

| Props | Type | Default | Description | | ---------------- |:--------------| ---------|--------------| | value | Number | 0 | init start value | | size | Number | 200 | sets svg width & heigth | | dial | Boolean | false | show value inside circle center | | dialTextColor | String | black | sets color of dial value inside circle center | | dialFontSize | Number | 50 | sets font-size of dial | sign | String | "" | add sign to the end value row inside circle center for exampe it's "%" add persent sign | | min             | Number       | 0 | sets the minimum value | | max | Number | 100 | sets the maximum value | | startAngleOffset | Number | 90 | sets angle offset | | offKnob | Boolean | false | remove circle knob | | offKnobNumber | Boolean | false | remove value in circle knob | | knobColor | String | white | sets knob color (unless explicitly stated, the props is the same as progressColor ) | | knobTextColor | String | black | sets knob text color | | knobBorderColor | String | #2196F3| knob border color (unless explicitly stated, the props is the same as progressColor ) | | knobBorderWidth | Number | 3 | sets knob border with in px | | knobRadius | Number | 18 | sets knob radius in px | | progressWidth | Number | 8 | sets width of circle progress in px | | progressColor | String | #2196F3| sets color of circle progress curve | | circleWidth | Number | 6 | sets width of circle border in px | | circleColor | String | #9E9E9E| sets border color of circle | | stepSize | Number | 1 | sets the gap between the values | | ms | Number | 500 | sets the duration of the animation | | disabled | Boolean | false | desabled events |

Slots

There is no any slots available

Demo

• Live Demo
• Git sources

License

MIT