Skip to content
Vanilla JS input component for knobs/dials. Highly customizable, portable, and accessible.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.
docs updating docs, adding FLReactiveGripDial Nov 8, 2017
.gitignore adding SCSS source and CSS output Oct 24, 2017
package-lock.json update package versions Sep 13, 2018

Precision Inputs

⚠️ 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 for a demo using the FLStandardKnob component.

See 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.

Planned Features

  • Components
    • Base
      • 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)
    • window global
    • React bindings (likely a separate package when implemented)
    • ✔ CSS
    • Sass (srr src/ folder for now for uncompiled SCSS)
  • ⚠ Detailed documentation and usage demos (partial progress)

Package Contents

├── 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
You can’t perform that action at this time.