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.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs updating docs, adding FLReactiveGripDial Nov 8, 2017
src
.babelrc
.editorconfig
.gitignore adding SCSS source and CSS output Oct 24, 2017
LICENSE.md
README.md
package-lock.json update package versions Sep 13, 2018
package.json
postcss.config.js
webpack.config.demo.js
webpack.config.lib.js

README.md

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.

Demos

See https://codepen.io/jhnsnc/pen/mqPGQK/ for a demo using the FLStandardKnob component.

See https://github.com/jhnsnc/precision-inputs-demo for the same demo in a webpack setup.

Documentation

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

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