https://github.com/stagas/x-knob

Web Component Knobs
https://github.com/stagas/x-knob

audio custom-element knob ui web-component

Last synced: 13 days ago
JSON representation

Web Component Knobs

• Host: GitHub
• URL: https://github.com/stagas/x-knob
• Owner: stagas
• License: mit
• Created: 2021-12-01T07:49:25.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-02-28T06:28:30.000Z (over 1 year ago)
• Last Synced: 2024-10-13T02:20:06.438Z (about 1 month ago)
• Topics: audio, custom-element, knob, ui, web-component
• Language: TypeScript
• Homepage:
• Size: 1.66 MB
• Stars: 16
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        




x-knob    





Web Component Knobs





npm i x-knob 


pnpm add x-knob 

yarn add x-knob

## Examples

#  web  


    
Try it live    #  view source  example/web.tsx  


```tsx

/** @jsxImportSource minimal-view */

import { render } from 'minimal-view'

import { Knob } from 'x-knob'

render(



  

  

  

  

, document.body)


// customElements.define('x-knob', KnobElement)

// document.body.innerHTML = /*html*/ `

// 

// html,

// body {

//   width: 100%;

//   height: 100%;

//   background: #383838;

// }

// x-knob {

//   width: 150px;

//   height: 150px;

// }

// 

// 


// 

// 

// 

// 

// 

// 

// 

// 

// 

// 


// 


// 

// `


// // 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

  #  themes   =   ...      


any
        
#  Knob(props)        
    
    #  props        


props
        
  


Knob(props)   =>  

VKid

    


## Credits

- [everyday-utils](https://npmjs.org/package/everyday-utils) by [stagas](https://github.com/stagas) – Everyday utilities

- [memoize-pure](https://npmjs.org/package/memoize-pure) by [stagas](https://github.com/stagas) – low footprint memoize for just pure sync functions with scalar arguments

- [minimal-view](https://npmjs.org/package/minimal-view) by [stagas](https://github.com/stagas) – Minimal reactive component view library.

- [relative-mouse](https://npmjs.org/package/relative-mouse) by [stagas](https://github.com/stagas) – Get mouse position relative to a DOM element.

- [sigl](https://npmjs.org/package/sigl) by [stagas](https://github.com/stagas) – Web framework

## Contributing

[Fork](https://github.com/stagas/x-knob/fork) or [edit](https://github.dev/stagas/x-knob) and submit a PR.

All contributions are welcome!

## License

MIT © 2023 [stagas](https://github.com/stagas)