⚠️Note: This library is in alpha. The names and functionality of all classes, properties, and methods are subject to change without notice until the full v1.0 release. See issues for discussion of changes.
These components can be styled to fit in perfectly in any app, and allow users to set precise values through many input modalities. Users can touch-and-drag, click-and-drag, scroll their mouse wheel, double click, or use keyboard input. After instantiation you can use the components just like you would any normal input.
Please report any issues you discover on Github.
See https://codepen.io/jhnsnc/pen/mqPGQK/ for a demo using the
See https://github.com/jhnsnc/precision-inputs-demo for the same demo in a webpack setup.
See the documentation table-of-contents for instructions on how to use/customize each type of component.
KnobInput- fully customizable, bare-bones base component
- FL Controls
FLStandardKnob- easy-to-use base knob component
FLReactiveGripDial- detailed dial with "grip" bumps, good for larger controls
❌numerical range input (e.g. channel selector) ❌customizable-range knob (e.g. flexible fine-tune knob) ❌X-Y controller ❌other components composed and styled like FL Studio controls
❓possibly other sets of styled, ready-to-use components
- Flexible deployment options
- ✔ Common JS
- ✔ UMD
❌ES modules (see
src/folder for now for uncompiled ES modules)
❌React bindings (likely a separate package when implemented)
- ✔ CSS
src/folder for now for uncompiled SCSS)
- ⚠ Detailed documentation and usage demos (partial progress)
precision-inputs ├── common │ ├── precision-inputs.base.js │ └── precision-inputs.fl-controls.js ├── css │ ├── precision-inputs.base.css │ └── precision-inputs.fl-controls.css ├── scripts │ ├── precision-inputs.base.js │ └── precision-inputs.fl-controls.js └── umd ├── precision-inputs.base.js └── precision-inputs.fl-controls.js