{"id":18062908,"url":"https://github.com/stagas/x-knob","last_synced_at":"2026-03-04T03:02:14.847Z","repository":{"id":57400777,"uuid":"433731969","full_name":"stagas/x-knob","owner":"stagas","description":"Web Component Knobs","archived":false,"fork":false,"pushed_at":"2023-02-28T06:28:30.000Z","size":1741,"stargazers_count":19,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-12T05:55:10.473Z","etag":null,"topics":["audio","custom-element","knob","ui","web-component"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/stagas.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}},"created_at":"2021-12-01T07:49:25.000Z","updated_at":"2025-08-09T13:21:08.000Z","dependencies_parsed_at":"2025-04-11T15:13:11.083Z","dependency_job_id":"a594f4b6-c081-43fc-b196-88985b0f8d46","html_url":"https://github.com/stagas/x-knob","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":"stagas/ts","purl":"pkg:github/stagas/x-knob","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stagas%2Fx-knob","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stagas%2Fx-knob/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stagas%2Fx-knob/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stagas%2Fx-knob/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stagas","download_url":"https://codeload.github.com/stagas/x-knob/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stagas%2Fx-knob/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30070479,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T01:03:42.280Z","status":"online","status_checked_at":"2026-03-04T02:00:07.464Z","response_time":59,"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":["audio","custom-element","knob","ui","web-component"],"created_at":"2024-10-31T05:08:50.447Z","updated_at":"2026-03-04T03:02:14.831Z","avatar_url":"https://github.com/stagas.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n\u003ch1\u003e\nx-knob \u003ca href=\"https://npmjs.org/package/x-knob\"\u003e\u003cimg src=\"https://img.shields.io/badge/npm-v4.1.0-F00.svg?colorA=000\"/\u003e\u003c/a\u003e \u003ca href=\"src\"\u003e\u003cimg src=\"https://img.shields.io/badge/loc-1,531-FFF.svg?colorA=000\"/\u003e\u003c/a\u003e \u003ca href=\"https://cdn.jsdelivr.net/npm/x-knob@4.1.0/dist/x-knob.min.js\"\u003e\u003cimg src=\"https://img.shields.io/badge/brotli-13.3K-333.svg?colorA=000\"/\u003e\u003c/a\u003e \u003ca href=\"LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-F0B.svg?colorA=000\"/\u003e\u003c/a\u003e\n\u003c/h1\u003e\n\n\u003cp\u003e\u003c/p\u003e\n\nWeb Component Knobs\n\n\u003ch4\u003e\n\u003ctable\u003e\u003ctr\u003e\u003ctd title=\"Triple click to select and copy paste\"\u003e\n\u003ccode\u003enpm i x-knob \u003c/code\u003e\n\u003c/td\u003e\u003ctd title=\"Triple click to select and copy paste\"\u003e\n\u003ccode\u003epnpm add x-knob \u003c/code\u003e\n\u003c/td\u003e\u003ctd title=\"Triple click to select and copy paste\"\u003e\n\u003ccode\u003eyarn add x-knob\u003c/code\u003e\n\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\u003c/h4\u003e\n\n## Examples\n\n\u003cdetails id=\"example$web\" title=\"web\" open\u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#example$web\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eweb\u003c/strong\u003e\u003c/code\u003e\u003c/summary\u003e  \u003cul\u003e\u003cp\u003e\u003c/p\u003e  \u003ca href=\"https://stagas.github.io/x-knob/example/web.html\"\u003e\u003cimg width=\"514.2857142857142\" src=\"example/web.webp\"\u003e\u003c/img\u003e  \u003cp\u003e\u003cstrong\u003eTry it live\u003c/strong\u003e\u003c/p\u003e\u003c/a\u003e    \u003cdetails id=\"source$web\" title=\"web source code\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#source$web\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eview source\u003c/strong\u003e\u003c/code\u003e\u003c/summary\u003e  \u003ca href=\"example/web.tsx\"\u003eexample/web.tsx\u003c/a\u003e  \u003cp\u003e\n\n```tsx\n/** @jsxImportSource minimal-view */\n\nimport { render } from 'minimal-view'\n\nimport { Knob } from 'x-knob'\n\nrender(\u003cdiv style=\"width:400px;height:100px;display:flex;\"\u003e\n  \u003cKnob\n    id=\"a\"\n    min={0}\n    max={1}\n    step={0.001}\n    value={0.5}\n    theme=\"zen\"\n  /\u003e\n  \u003cKnob\n    id=\"b\"\n    min={0}\n    max={1}\n    step={0.001}\n    value={0.5}\n    theme=\"cowbell\"\n  /\u003e\n  \u003cKnob\n    id=\"b\"\n    min={0}\n    max={1}\n    step={0.001}\n    value={0.5}\n    theme=\"zen\"\n  /\u003e\n  \u003cKnob\n    id=\"b\"\n    min={0}\n    max={1}\n    step={0.001}\n    value={0.5}\n    theme=\"zen\"\n  /\u003e\n\u003c/div\u003e, document.body)\n\n// customElements.define('x-knob', KnobElement)\n\n// document.body.innerHTML = /*html*/ `\n// \u003cstyle\u003e\n// html,\n// body {\n//   width: 100%;\n//   height: 100%;\n//   background: #383838;\n// }\n// x-knob {\n//   width: 150px;\n//   height: 150px;\n// }\n// \u003c/style\u003e\n// \u003cdiv id=\"demo\" style=\"display:grid;grid:1fr 1fr 1fr/1fr 1fr 1fr;width:450px\"\u003e\n// \u003cx-knob theme=\"power\" value=\"50\" min=\"-60\" step=\"1\" value=\"0\" max=\"60\"\u003e\u003c/x-knob\u003e\n// \u003cx-knob theme=\"intense\" value=\"50\" min=\"-60\" step=\"1\" value=\"0\" max=\"60\"\u003e\u003c/x-knob\u003e\n// \u003cx-knob theme=\"amp\" value=\"5\" max=\"11\" step=\"0.1\" min=\"0\"\u003e\u003c/x-knob\u003e\n// \u003cx-knob theme=\"retro\"  value=\"50\" min=\"-60\" step=\"1\" value=\"0\" max=\"60\"\u003e\u003c/x-knob\u003e\n// \u003cx-knob theme=\"metallic\" value=\"50\" min=\"-60\" step=\"1\" value=\"0\" max=\"60\"\u003e\u003c/x-knob\u003e\n// \u003cx-knob theme=\"sweet\" symmetric min=\"-60\" step=\"1\" value=\"0\" max=\"60\"\u003e\u003c/x-knob\u003e\n// \u003cx-knob theme=\"flat\" value=\"50\" min=\"-60\" step=\"1\" value=\"0\" max=\"60\"\u003e\u003c/x-knob\u003e\n// \u003cx-knob theme=\"ableton\" value=\"50\" min=\"-60\" step=\"1\" value=\"0\" max=\"60\"\u003e\u003c/x-knob\u003e\n// \u003cx-knob theme=\"zen\" value=\"50\" min=\"-60\" step=\"1\" value=\"0\" max=\"60\"\u003e\u003c/x-knob\u003e\n// \u003cdiv style=\"margin: 10px; border:2px solid #000; width: 150px; height: 150px;\"\u003e\u003cx-knob style=\"width:100%; height:100%\" theme=\"zen\" value=\"50\" min=\"-60\" step=\"1\" value=\"0\" max=\"60\"\u003e\u003c/x-knob\u003e\u003c/div\u003e\n// \u003cdiv style=\"margin: 10px; border:2px solid #000; width: 150px; height: 150px;\"\u003e\u003cx-knob style=\"width:100%; height:100%\" theme=\"circle\" value=\"50\" min=\"-60\" step=\"1\" value=\"0\" max=\"60\"\u003e\u003c/x-knob\u003e\u003c/div\u003e\n// \u003c/div\u003e\n// `\n\n// // const knobs = document.querySelectorAll('x-knob') as NodeListOf\u003cKnobElement\u003e\n// // let i = 0\n// // const ivl = setInterval(() =\u003e {\n// //   const knob = knobs[i++ % knobs.length]\n// //   knob.targetValue! += (knob.normal \u003e 0.5 ? -1 : knob.normal === 0.5 ? (Math.random() - 0.5) * 2 : 1) * Math.random()\n// //     * knob.scale\n// //     * 0.95\n// //   if (i \u003e= knobs.length) clearInterval(ivl)\n// // }, 60)\n```\n\n\u003c/p\u003e\n\u003c/details\u003e\u003c/ul\u003e\u003c/details\u003e\n\n\n## API\n\n\u003cp\u003e  \u003cdetails id=\"themes$1\" title=\"Variable\" open\u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#themes$1\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ethemes\u003c/strong\u003e\u003c/code\u003e  \u003cspan\u003e\u003cspan\u003e\u0026nbsp;=\u0026nbsp;\u003c/span\u003e  \u003ccode\u003e...\u003c/code\u003e\u003c/span\u003e  \u003c/summary\u003e  \u003ca href=\"\"\u003e\u003c/a\u003e  \u003cul\u003e\u003cp\u003eany\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"Knob$2\" title=\"Function\" open\u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#Knob$2\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eKnob\u003c/strong\u003e\u003c/code\u003e\u003cem\u003e(props)\u003c/em\u003e    \u003c/summary\u003e  \u003ca href=\"\"\u003e\u003c/a\u003e  \u003cul\u003e    \u003cp\u003e    \u003cdetails id=\"props$4\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#props$4\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eprops\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003cspan\u003eprops\u003c/span\u003e\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e  \u003cp\u003e\u003cstrong\u003eKnob\u003c/strong\u003e\u003cem\u003e(props)\u003c/em\u003e  \u0026nbsp;=\u0026gt;  \u003cul\u003e\u003cspan\u003eVKid\u003c/span\u003e\u003c/ul\u003e\u003c/p\u003e\u003c/p\u003e    \u003c/ul\u003e\u003c/details\u003e\u003c/p\u003e\n\n## Credits\n- [everyday-utils](https://npmjs.org/package/everyday-utils) by [stagas](https://github.com/stagas) \u0026ndash; Everyday utilities\n- [memoize-pure](https://npmjs.org/package/memoize-pure) by [stagas](https://github.com/stagas) \u0026ndash; low footprint memoize for just pure sync functions with scalar arguments\n- [minimal-view](https://npmjs.org/package/minimal-view) by [stagas](https://github.com/stagas) \u0026ndash; Minimal reactive component view library.\n- [relative-mouse](https://npmjs.org/package/relative-mouse) by [stagas](https://github.com/stagas) \u0026ndash; Get mouse position relative to a DOM element.\n- [sigl](https://npmjs.org/package/sigl) by [stagas](https://github.com/stagas) \u0026ndash; Web framework\n\n## Contributing\n\n[Fork](https://github.com/stagas/x-knob/fork) or [edit](https://github.dev/stagas/x-knob) and submit a PR.\n\nAll contributions are welcome!\n\n## License\n\n\u003ca href=\"LICENSE\"\u003eMIT\u003c/a\u003e \u0026copy; 2023 [stagas](https://github.com/stagas)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstagas%2Fx-knob","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstagas%2Fx-knob","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstagas%2Fx-knob/lists"}