{"id":13805610,"url":"https://github.com/thomasloven/round-slider","last_synced_at":"2025-04-07T17:09:21.193Z","repository":{"id":35097277,"uuid":"206386040","full_name":"thomasloven/round-slider","owner":"thomasloven","description":null,"archived":false,"fork":false,"pushed_at":"2024-09-27T05:23:45.000Z","size":134,"stargazers_count":85,"open_issues_count":4,"forks_count":26,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-11T13:38:02.388Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/thomasloven.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-04T18:26:35.000Z","updated_at":"2024-09-08T21:40:22.000Z","dependencies_parsed_at":"2024-10-25T12:48:18.831Z","dependency_job_id":"b1f77649-e4d7-4d0d-84be-2943376b9174","html_url":"https://github.com/thomasloven/round-slider","commit_stats":{"total_commits":53,"total_committers":7,"mean_commits":7.571428571428571,"dds":"0.16981132075471694","last_synced_commit":"7912bde6d75f07a3085a6625e103e50d81983c86"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomasloven%2Fround-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomasloven%2Fround-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomasloven%2Fround-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thomasloven%2Fround-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thomasloven","download_url":"https://codeload.github.com/thomasloven/round-slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247694876,"owners_count":20980733,"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-08-04T01:01:03.011Z","updated_at":"2025-04-07T17:09:21.163Z","avatar_url":"https://github.com/thomasloven.png","language":"JavaScript","funding_links":[],"categories":["Standalone Components"],"sub_categories":[],"readme":"# round-slider\n\nA simple round slider webcomponent - [demo](https://rawcdn.githack.com/thomasloven/round-slider/master/example.html)\n\n![single](https://user-images.githubusercontent.com/1299821/64284907-e48d9100-cf5a-11e9-99ed-07afbfb1eada.png)\n\n## Properties\n\n- `value` - Required for single slider\n- `low` - Required for high/low slider\n- `high` - Required for high/low slider\n\n- `min` - Lower limit of values\n- `max` - Higher limit of values\n- `step` - Step size of slider\n\n- `startAngle` - Angle in degrees at which slider bar starts (default: 135)\n- `arcLength` - Length in degrees of slider bar (default: 270)\n\n- `handleSize` - Radius of handle in pixels (default: 6)\n- `handleZoom` - The factor the handle size scales when dragged (default: 1.5)\n- `disabled` - Boolean property disabling the slider (default: false)\n- `readonly` - Boolean property disabling slider events (default: false)\n- `rtl` - Boolean property to have the slider move Right to Left (default: false)\n\n- `valueLabel` - Value to apply to `aria-label` property of value handle\n- `lowLabel` - Value to apply to `aria-label` property of low handle\n- `highLabel` - Value to apply to `aria-label` property of high handle\n\n- `outside` - if true a high/low slider will fill up from the outsides in of inside out (default: false)\n\n## Events\n\nThe slider dispatches two events\n\n- `value-changing` when the value is changed but the mouse button is still pressed\n- `value-changed` on release of mouse button\n\nBoth events pass an object as `detail` with either `value`, `low`, or `high` set to the new value depending on which slider was pulled.\n\n## CSS styles\n\nThe following css variables can be used to change the styles:\n\n- `--round-slider-path-color` - color of bar path\n- `--round-slider-bar-color` - color of bar\n- `--round-slider-handle-color` - color of handles\n- `--round-slider-low-handle-color` - color of low handle (overrides `--round-slider-handle-color`)\n- `--round-slider-high-handle-color` - color of high handle (overrides `--round-slider-handle-color`)\n- `--round-slider-low-bar-color` - color of low bar when `outside` is true (overrides `--round-slider-bar-color`)\n- `--round-slider-high-bar-color` - color of high bar when `outside` is true (overrides `--round-slider-bar-color`)\n- `--round-slider-handle-cursor` - cursor to use on the handles (default `pointer`)\n- `--round-slider-path-width` - bar width in pixels (default: 3)\n- `--round-slider-linecap` - svg linecaps of bar (default: `round`)\n\n## Examples\n\nSee [example.html](https://rawcdn.githack.com/thomasloven/round-slider/master/example.html) for usage examples.\n![Examples](https://user-images.githubusercontent.com/1299821/64284861-c9bb1c80-cf5a-11e9-830f-11951f84596d.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasloven%2Fround-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthomasloven%2Fround-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasloven%2Fround-slider/lists"}