{"id":50977153,"url":"https://github.com/luncheon/lucency-slider","last_synced_at":"2026-06-19T09:32:07.424Z","repository":{"id":322580139,"uuid":"1089986068","full_name":"luncheon/lucency-slider","owner":"luncheon","description":"A tiny web component for inputting translucency/opacity.","archived":false,"fork":false,"pushed_at":"2025-11-28T23:16:03.000Z","size":24,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-04T23:09:16.788Z","etag":null,"topics":["color-picker","opacity","opacity-slider","picker","slider","webcomponent","webcomponents"],"latest_commit_sha":null,"homepage":"https://luncheon.github.io/lucency-slider/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"wtfpl","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/luncheon.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-05T04:33:48.000Z","updated_at":"2025-11-28T23:15:57.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/luncheon/lucency-slider","commit_stats":null,"previous_names":["luncheon/lucency-slider"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/luncheon/lucency-slider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luncheon%2Flucency-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luncheon%2Flucency-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luncheon%2Flucency-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luncheon%2Flucency-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luncheon","download_url":"https://codeload.github.com/luncheon/lucency-slider/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luncheon%2Flucency-slider/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34526065,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-19T02:00:06.005Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["color-picker","opacity","opacity-slider","picker","slider","webcomponent","webcomponents"],"created_at":"2026-06-19T09:32:06.266Z","updated_at":"2026-06-19T09:32:07.414Z","avatar_url":"https://github.com/luncheon.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u0026lt;lucency-slider\u0026gt;\n\nA tiny web component for inputting translucency/opacity.\n\n[\u003cimg alt=\"image\" height=\"20px\" src=\"https://luncheon.github.io/lucency-slider/image.png\"\u003e](https://luncheon.github.io/lucency-slider/)\n\n- Demo: https://luncheon.github.io/lucency-slider/\n- Playgroud: https://codepen.io/luncheon/pen/qEZbeMZ?layout=left\n\n## Usage\n\n```html\n\u003clink rel=\"stylesheet\" href=\"lucency-slider/lucency-slider.css\"\u003e\n\u003cscript type=\"module\" src=\"lucency-slider/lucency-slider.js\"\u003e\u003c/script\u003e\n\u003clucency-slider style=\"color: rebeccapurple;\"\u003e\u003c/lucency-slider\u003e\n```\n\n## HTML Attributes\n\n```html\n\u003clucency-slider value=\"100\" min=\"0\" max=\"100\" step=\"1\"\u003e\u003c/lucency-slider\u003e\n```\n\n| Name     | Type                     | Default | Description        |\n| -------- | ------------------------ | ------: | ------------------ |\n| disabled | boolean (existence)      |   false | Immutability       |\n| max      | number [0, 100]          |     100 | Upper bound        |\n| min      | number [0, 100]          |       0 | Lower bound        |\n| name     | string                   |         | Form control name  |\n| step     | number [0, 100] or `any` |       1 | Granularity        |\n| value    | number [0, 100]          |     100 | Opacity percentage |\n| vertical | boolean (existence)      |   false | Orientation        |\n\n## DOM Element Properties\n\n```js\nconst lucencySlider = document.createElement(\"lucency-slider\");\nlucencySlider.valueAsNumber = 100;\n```\n\nThe attributes listed above can be used as properties with the same names.\n\n| Name     | Type              | Description        |\n| -------- | ----------------- | ------------------ |\n| disabled | boolean           | Immutability       |\n| max      | number            | Upper bound        |\n| min      | number            | Lower bound        |\n| name     | string            | Form control name  |\n| step     | number or `\"any\"` | Granularity        |\n| value    | string            | Opacity percentage |\n| vertical | boolean           | Orientation        |\n\nAdditionally, `valueAsNumber` can be used in the same way as `HTMLInputElement`.\n\n| Name          | Type   | Description                    |\n| ------------- | ------ | ------------------------------ |\n| valueAsNumber | number | Opacity percentage as a number |\n\n## DOM Events\n\n```js\nconst lucencySlider = document.createElement(\"lucency-slider\");\nlucencySlider.addEventListener(\"input\", event =\u003e {\n  document.body.style.background = `rgb(from rebeccapurple r g b / ${event.target.valueAsNumber}%)`;\n});\n```\n\n| Type   | Description                                      |\n| ------ | ------------------------------------------------ |\n| input  | User modified the opacity                        |\n| change | User modified the opacity and released the thumb |\n\n## Styling\n\n```html\n\u003clucency-slicer class=\"slider1\"\u003e\u003c/lucency-slider\u003e\n\n\u003cstyle\u003e\n  .slider1 {\n    /* slider color */\n    color: rebeccapurple;\n\n    /* checker grid size is based on line-height (1/4 lh) */\n    line-height: 24px;\n\n    /* checker grid colors */\n    /* default: */\n    --checker-color-1: #ddd;\n    --checker-color-2: #fff;\n\n    \u0026::part(thumb) {\n      /* where your skills come into play */\n      /* default: */\n      inline-size: 4px;\n      border-radius: 9px;\n      border: 1px solid #fff;\n      box-shadow: 0 0 0 1px #333;\n    }\n\n    \u0026:hover:not(:active):not([disabled])::part(thumb) {\n      /* recommended to highlight */\n      /* default: */\n      border-color: #ddd;\n    }\n\n    \u0026[disabled] {\n      /* recommended to lowlight */\n      /* default: */\n      \u0026::part(thumb) {\n        box-shadow: 0 0 0 1px #888;\n      }\n    }\n  }\n\u003c/style\u003e\n```\n\n## License\n\n[WTFPL](http://www.wtfpl.net)\n\n\n## Sibling Packages\n\n- [reinvented-color-wheel](https://github.com/luncheon/reinvented-color-wheel): HSV color wheel\n- [lch-color-wheel](https://github.com/luncheon/lch-color-wheel): L\\*C\\*h color wheel\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluncheon%2Flucency-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluncheon%2Flucency-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluncheon%2Flucency-slider/lists"}