UI widgets for music software in the browser.
For your convenience:
npm install knobjs
bower install knobjs
or, just hotlink the file:
Then, include some sort of styling for the knobs. You can include the included
knobjs.css or create your own style
Then, create an element of type
x-knobjs-knob. You can either use an html tag or
value attribute of the element will correspond to the knob's current position (by default, from 0-100). To listen to changes, add an event listener to the
change event, which occurs whenever the value changes. You can either use
element.onchage = f or
For an example of all this, see the example included in
element.setAttribute or HTML. The following settings can be changed:
value: The current value of the knob. Clipped between
min: The minimum value of the knob. Default:
max: The maximum value of the knob. Default:
start-angle: the angle in radians at which the knob's arc starts. Default:
5 / 8 Tau
angle-range: the angle range of the knob's arc in radians. Default:
inner-radius: the radius of the inner part of the knob's arc, relative to the size of the knob element. Default:
outer-radius: the radius of the outer part of the knob's arc, relative to the size of the knob element. Default:
throw: the number of pixels of mouse dragging it takes to go from the
To style sub-elements of the knob, apply CSS styles to the following classes:
.knobjs-bg: the background of the entire knob element
.knobjs-arcbg: the full arc
.knobjs-arc: the arc that displays the current value.
Each of these sub elements is an
SVG element, and any applicable style will work. The ones that you probably want to use most commonly are
.knobjs-arcbg element by default has a mask that only allows it to display outside of the path of the
.knobjs-arc. To disable this just add a
mask: none; style.
The slightly "magic" features of this library are all provided by polymer platform, a polyfill for future browser features. This means a relatively contemporary browser is required.
knob.js was designed for a future where browsers have web app features like the Shadow DOM. For now, semantic markup has been sacrificed to get the project to work on current browsers. Once the Shadow DOM and CSS variables are relatively widely supported, knob.js will be redesigned as an alternate shadow DOM for an
input element of
range type, restoring semantic correctness to your markup. Presentational attributes like
outer-radius and friends will be moved into a stylesheet, and
.knobjs-bg and friends will become pseudo-elements.
Every effort was made to make
Boost Software License. See