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.

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.


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.

Related Posts


How to Create a Simple Cookie Banner Consent Using Bootstrap 4

Cookie Consent Popup Javascript – Quick and simple tutorial for creating a simple Bootstrap cookie banner. If you have a website or blog with people visiting or…


Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…


Bootstrap Alert, Confirm, and Flexible Dialog Boxes | Bootbox

Bootbox.js is a small JavaScript library that allows you to create programming dialogs using Bootstrap templates, without having to worry about creating, managing, or removing any required…


An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….


A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…


A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…