Precision InputsThese 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.
DemosSee 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.
DocumentationSee the documentation table-of-contents for instructions on how to use/customize each type of component.
- FL Controls
- ✔ `KnobInput` - fully customizable, bare-bones base component
- ❓ possibly other sets of styled, ready-to-use components
- ✔ `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) - ❌ slider input - ❌ X-Y controller - ❌ other components composed and styled like FL Studio controls
Package ContentsFor now, the components are distributed as a single UMD module with all relevant classes accessible via the default export object.
precision-inputs └── dist ├── precision-inputs.css ├── precision-inputs.css.map ├── precision-inputs.js └── precision-inputs.js.map