Canvas-Based JavaScript UI Element Implementing Touch, Keyboard, Mouse, and Scroll Wheel Support

A canvas-based JavaScript UI element that implements touch, keyboard, mouse, and scroll wheel support and thisĀ component for displaying highly customizable and tablet-based knobs/dials/gauges on a web application.


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

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.


Set the peak value.


Append the knob to a component.

<div id="demo"></div>
var node = knob.node();
var elem = document.getElementById('demo');

Add an event listener to the knob.

var listener = function(knob, value) {


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

pure-knob Demo

See Demo And Download

Official Website(andrepxx): Click Here

This superior jQuery/javascript plugin is developed by andrepxx. For extra advanced usage, please go to the official website.