https://github.com/devstark-com/vue-circle-slider
Circle slider component for Vue.js
https://github.com/devstark-com/vue-circle-slider
Last synced: 10 months ago
JSON representation
Circle slider component for Vue.js
- Host: GitHub
- URL: https://github.com/devstark-com/vue-circle-slider
- Owner: devstark-com
- License: mit
- Created: 2017-05-13T14:28:04.000Z (over 8 years ago)
- Default Branch: develop
- Last Pushed: 2020-06-17T14:25:47.000Z (over 5 years ago)
- Last Synced: 2025-01-14T12:02:43.047Z (11 months ago)
- Language: Vue
- Size: 316 KB
- Stars: 222
- Watchers: 14
- Forks: 48
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-zh - Vue圈滑块 - 用于vue2.x的Circle滑块组件. (UI组件 / 形成)
- awesome-vue - vue-circle-slider - Circle slider component for Vue.js ` 📝 3 years ago` (UI Components [🔝](#readme))
- awesome-vue - vue-circle-slider - Circle slider component for vue2.x. (Components & Libraries / UI Components)
- awesome-vue - vue-circle-slider ★140 - Circle slider component for vue2.x. (UI Components / Form)
- awesome-vue - vue-circle-slider - Circle slider component for vue2.x. (UI Components / Form)
README
# vue-circle-slider
[](https://vuejs.org/)
[](https://github.com/devstark-com/vue-circle-slider)
[ ](https://www.npmjs.com/package/vue-circle-slider)
[](https://github.com/devstark-com/vue-circle-slider)
Circle slider component for Vue.js
## Table of contents
- [Installation](#installation)
- [Usage](#usage)
- [Demo](#demo)
- [TODO intentions](#todo)
# Installation
```
npm install --save vue-circle-slider
```
## Adding into app
```javascript
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:
```html
...
...
```
or customize some properties:
```html
...
...
```
## 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](https://devstark-com.github.io/vue-circle-slider-demo/)
- [Demo sources](https://github.com/devstark-com/vue-circle-slider-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](http://opensource.org/licenses/MIT)