x-knob
v4.1.0TypeScript
Web Component Knobs
0/weekUpdated 2 years agoMITUnpacked: 979.9 KB
Published by stagas
npm install x-knob
x-knob 
Web Component Knobs
npm i x-knob | pnpm add x-knob | yarn add x-knob |
Examples
Try it live `` import { render } from 'minimal-view' import { Knob } from 'x-knob' render(#
web
#
example/web.tsx view sourcetsx
/* @jsxImportSource minimal-view /, document.body)
min={0}
max={1}
step={0.001}
value={0.5}
theme="zen"
/>
min={0}
max={1}
step={0.001}
value={0.5}
theme="cowbell"
/>
min={0}
max={1}
step={0.001}
value={0.5}
theme="zen"
/>
min={0}
max={1}
step={0.001}
value={0.5}
theme="zen"
/>
// customElements.define('x-knob', KnobElement)
// document.body.innerHTML = /html/
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
// // const knobs = document.querySelectorAll('x-knob') as NodeListOf
// // let i = 0
// // const ivl = setInterval(() => {
// // const knob = knobs[i++ % knobs.length]
// // knob.targetValue! += (knob.normal > 0.5 ? -1 : knob.normal === 0.5 ? (Math.random() - 0.5) 2 : 1) Math.random()
// // * knob.scale
// // * 0.95
// // if (i >= knobs.length) clearInterval(ivl)
// // }, 60)
API
Credits
- everyday-utils by stagas – Everyday utilities
- memoize-pure by stagas – low footprint memoize for just pure sync functions with scalar arguments
- minimal-view by stagas – Minimal reactive component view library.
- relative-mouse by stagas – Get mouse position relative to a DOM element.
- sigl by stagas – Web framework
Contributing
All contributions are welcome!