Features:

• Canvas-based, no image files required.
• Mouse, wheel, touch, and keyboard controls.

ngx Virtual Keyboard for Angular Applications

How to make use of it:

Import the primary JavaScript file pureknob.js into the HTML doc.

<script src="pureknob.js"></script>

Create a brand new knob instance (300x300px).

var myKnob = pureknob.createKnob(300, 300);

Set properties. All potential properties:

colorBG: Color of the bar graph track.
colorFG: Color of the bar graph filling/indicator.
colorMarkers: Color of the markers (scale) on both sides (top and bottom) of the bar graph track.
markerStart: Value where the first marker will be drawn along the track.
markerEnd: Value where the last marker will be drawn along the track.
markerStep: Spacing (increment) between the markers.
trackWidth: Width of the track, relative to the absolute height of the control.
valMin: Minimum value which can be displayed (left-hand side of the track).
valMax: Maximum value that can be displayed (right-hand side of the track).
valPeaks: List of peak values to be displayed. (Do not edit directly! Use setPeaks(...) to set this.)
val: Default value. (Do not edit directly! Use setValue(...) to set this.)

myKnob.setProperty(propertyName, value);

Set the preliminary value you favor.

myKnob.setValue(70);

Set the peak value.

myKnob.setPeaks([80]);

Append the knob to a component.

<div id="demo"></div>

var node = knob.node();
var elem = document.getElementById('demo');
elem.appendChild(node);

Add an event listener to the knob.

var listener = function(knob, value) {
  console.log(value);
};

knob.addListener(listener);

Canvas-based JavaScript Knob/Dial Component, pure-knob Plugin/Github

See Demo And Download