{"id":19261858,"url":"https://github.com/devstark-com/vue-circle-slider","last_synced_at":"2026-01-27T17:37:40.335Z","repository":{"id":57394949,"uuid":"91179871","full_name":"devstark-com/vue-circle-slider","owner":"devstark-com","description":"Circle slider component for Vue.js","archived":false,"fork":false,"pushed_at":"2020-06-17T14:25:47.000Z","size":324,"stargazers_count":222,"open_issues_count":21,"forks_count":48,"subscribers_count":14,"default_branch":"develop","last_synced_at":"2025-01-14T12:02:43.047Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devstark-com.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-13T14:28:04.000Z","updated_at":"2025-01-09T11:12:52.000Z","dependencies_parsed_at":"2022-09-06T02:52:34.371Z","dependency_job_id":null,"html_url":"https://github.com/devstark-com/vue-circle-slider","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devstark-com%2Fvue-circle-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devstark-com%2Fvue-circle-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devstark-com%2Fvue-circle-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devstark-com%2Fvue-circle-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devstark-com","download_url":"https://codeload.github.com/devstark-com/vue-circle-slider/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240364294,"owners_count":19789756,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T19:28:38.889Z","updated_at":"2026-01-27T17:37:40.293Z","avatar_url":"https://github.com/devstark-com.png","language":"Vue","funding_links":[],"categories":["UI组件","Components \u0026 Libraries","Vue","UI Components","UI Components [🔝](#readme)"],"sub_categories":["形成","UI Components","Form"],"readme":"# vue-circle-slider\n\n[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)\n[![build](https://img.shields.io/wercker/ci/wercker/docs.svg)](https://github.com/devstark-com/vue-circle-slider)\n[![npm](https://img.shields.io/npm/v/vue-circle-slider.svg) ![npm](https://img.shields.io/npm/dm/vue-circle-slider.svg)](https://www.npmjs.com/package/vue-circle-slider)\n[![build](https://img.shields.io/npm/l/express.svg)](https://github.com/devstark-com/vue-circle-slider)\n\nCircle slider component for Vue.js\n\n## Table of contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Demo](#demo)\n- [TODO intentions](#todo)\n\n# Installation\n\n```\nnpm install --save vue-circle-slider\n```\n\n## Adding into app\n\n```javascript\nimport Vue from 'vue'\nimport VueCircleSlider from 'vue-circle-slider'\n\nVue.use(VueCircleSlider)\n```\n\n# Usage\n\n## Functionality\n\n- svg based view\n- binding via `v-model`\n- defining min \u0026 max values\n- defining step size\n- animation while updating to new value on click by circle\n- touch devices support (`touchmove`)\n- sizes customization: exact and relative definitions\n- colors customization\n\n## Examples\n\nPlugin will register a global component with name `CircleSlider` so you can just use it right away:\n\n```html\n...\n\u003ccircle-slider v-model=\"sliderValue\"\u003e\u003c/circle-slider\u003e\n...\n```\n\nor customize some properties:\n\n```html\n...\n\u003ccircle-slider\n  v-model=\"sliderValue\"\n  :side=\"150\"\n  :min=\"0\"\n  :max=\"10000\"\n  :step-size=\"100\"\n  :circle-width-rel=\"20\"\n  :progress-width-rel=\"10\"\n  :knob-radius=\"10\"\n\u003e\u003c/circle-slider\u003e\n...\n```\n\n## Interface\n\n### Props\n\n| Props            | Type          | Default  | Description  |\n| ---------------- |:--------------| ---------|--------------|\n| side             | Number        | 100      | size of a side of a svg square in px |\n| min              | Number        | 0        | the minimum value |\n| max              | Number        | 100      | the maximum value |\n| stepSize         | Number        | 1        | the gap between the values |\n| circleColor      | String        | `#334860`| color of slider circumference |\n| progressColor    | String        | `#00be7e`| color of progress curve |\n| knobColor        | String        | `#00be7e`| knob color |\n| knobRadius       | Number        | null     | exact knob radius in px |\n| knobRadiusRel    | Number        | 7        | relative knob radius. radius value in px will be calculated as `(side/2) / knobRadiusRel` |\n| circleWidth      | Number        | null     | exact width of circle in px |\n| circleWidthRel   | Number        | 20       | relative circle width. width value in px will be calculated as `(side/2) / circleWidthRel` |\n| progressWidth    | Number        | null     | exact progress curve width in px |\n| progressWidthRel | Number        | 10       | relative progress curve width. width value in px will be calculated as `(side/2) / progressWidthRel` |\n\n### Events\n\n| Name          | Params        | Description  |\n| --------------|:--------------|--------------|\n| touchmove     | none          | fires on touch devices |\n\n### Slots\n\nThere is no any slots available\n\n\n# Demo\n\n- [Working demo](https://devstark-com.github.io/vue-circle-slider-demo/)\n- [Demo sources](https://github.com/devstark-com/vue-circle-slider-demo/)\n\n# TODO\n\n- add plugin options for defining custom defaults via `Vue.use(VueCircleSlider, options)`\n  - globalComponent[Boolean] - enable/disable global component registration\n  - componentName[String] - ability to define custom name for component\n  - options with defaults for all props (with same names)\n- add `limitMin` and `limitMax` props to limit an accessible slider range\n\n---\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevstark-com%2Fvue-circle-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevstark-com%2Fvue-circle-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevstark-com%2Fvue-circle-slider/lists"}