NpKnob

About

A small pure javascript library for creating rotating knobs. It was created while I had the idea to rebuild my BeatMachine.


Usage

Install by npm: npm install np-knob

You can import it in your project the next ways:

* the ES6 way: import NpKnob from 'np-knob';
* the node way: const NpKnob = require('np-knob');
* the old-skool way using the script tag

In you project create an element with an id. Then add the next code:

const knob1 = new NpKnob('your-id', options);

...and thats it. Now you can listen to the events it's fyering:

knob1.knob.addEventListener('knob-rotate', (evt) => {
/**
* Print the value of the button
*/
console.log(evt.default.value);
});

Documentation

$3

* id: The id of the DOM-element
* options: Set of default options. This is an object with the following aatributes:
- min: the minimum value of the knob
- max: the maximum value of the knob
- step: the step size in decimals.
- step -1 is in 0.1 step-size
- step 0 is in 1 step-size
- step 1 is in 10 step-size
- value: the start value of the knob

$3

* obj: Returns the DOM-element of the corresponding knob
* getValue: Get the current value of the knob
* setValue: Set a new value to the knob

$3

When rotating the knob or clicking it to set the value an event is fired.

* knob-rotate: Parses the value of the knob

Also the created input can be used for eventlistening. You can do it like:

const knob1 = new NpKnob('your-id', options);
knob1.input.addEventlistener(event, callback);

$3

NpKnob can easily be styled with css. Here's an example.

.npknob + input[type="number"] {
display: none;
}

.npknob-wrapper {
display: inline-block;
height: 120px;
margin: 1rem auto;
position: relative;
width: 120px;
}

.npknob {
transition: transform .5s ease;
background: transparent;
border-color: #92c5c8;
border-style: solid;
border-radius: 50%;
border-width: 6px;
box-sizing: border-box;
display: block;
position: relative;
width: 120px;
height: 120px;
}

.npknob::after {
content: '';
background-color: #92c5c8;
display: block;
height: 40%;
left: 50%;
position: absolute;
top: 0;
transform: translateX(-50%);
width: 6px;
}

.npknob.active {
transition: none;
border-color: #a3dde0;
box-shadow: 0 0 5px 0 #a3dde0, inset 0 0 5px 0 #a3dde0;
}

.npknob.active::after {
background-color: #a3dde0;
box-shadow: 0 0 5px 0 #a3dde0, inset 0 0 5px 0 #a3dde0;
}