knob.js
Knob.js is a HTML element for spinning and getting the degree.
Demo
Sets knob with min, max, and degree. Also we can change the size of knob.
An application of knob with CD styled media player.
Get Started
<script defer src="https://unpkg.com/@lf2com/knob.js@latest/dist/knob.min.js"></script>
<!-- or -->
<script defer src="https://cdn.jsdelivr.net/gh/lf2com/knob.js@latest/dist/knob.min.js"></script>Use knob in HTML:
<knob-line min="-30" max="120"></knob-line>Or in JavaScript code:
const knob = document.createElement('knob-line');
knob.setAttribute('min', -30);
knob.setAttribute('max', 120);
// or
knob.min = -30;
knob.max = 120;
document.body.append(knob);As knob.js is an element, we can code in jQuery:
$('<knob-line>')
.attr({
min: -30,
max: 120,
})
.appendTo($('body'));Or in React:
const Knob = () => (
<knob-line min="-30" max="120" />
);Styled Knobs
There are default styled knobs we can use directly without styling knob ourselves.
Dot Knob
<knob-dot></knob-dot>Line Knob
<knob-line></knob-line>Triangle Knob
<knob-triangle></knob-triangle>Customize Knob
We can customize knob with knob base element:
⚠️ When customizing knob we need to append child node to<knob-base>and style the child node.
<style>
knob-base > .knob {
width: 100px;
height: 80px;
box-shadow: 0 0 5px #999;
box-sizing: border-box;
border-radius: 20%;
border: 3px solid #ccc;
display: inline-block;
/* ensure the knob can receive mouse/touch event */
background-color: rgba(0, 0, 0, 0);
}
</style>
<body>
<knob-base>
<!-- knob doesn't rotates itself but its children -->
<span class="knob"></span>
</knob-base>
</body>Build
Build flip.js with the command:
npm run buildAnd get the built file at ./dist/knob.min.js.
Properties
Properties for setting knob.
.disabled
Type of value:
boolean
Set true to disallow spinning the knob.
<!-- disable knob -->
<knob-line disabled></knob-line>// disable knob
knob.disabled = true;
// or
knob.setAttribute('disabled', '');
// check if knob is disabled
if (knob.disabled) {
console.log('Knob is disabled');
}.degree
Type of value:
number
Degree of knob.
<!-- set degree -->
<knob-dot degree="30"></knob-dot>// set degree
knob.degree = 30;
// or
knob.setAttribute('degree', 30);
// get degree in number
console.log('degree:', knob.degree);
// or in string
console.log('degree:', knob.getAttribute('degree'));.value
Alias of .degree.
// set value
knob.value = 30;
// get value
console.log('value:', knob.value);.min
Type of value:
numberDefault value:
-Infinity
Minimum degree of knob.
<!-- set min/max -->
<knob-triangle min="-60"></knob-triangle>// set min
knob.min = -60;
// or
knob.setAttribute('min', -60);
// get min in number
console.log('min:', knob.min);
// or in string
console.log('min:', knob.getAttribute('min'));.max
Type of value:
numberDefault value:
Infinity
Maximum degree of knob.
<!-- set min/max -->
<knob-triangle max="150"></knob-triangle>// set max
knob.max = 150;
// or
knob.setAttribute('max', 150);
// get max in number
console.log('max:', knob.max);
// or in string
console.log('max:', knob.getAttribute('max'));Events
Events for knob elements:
change
Cancelable:
false
Dispatches on change of knob degree.
Values of event.detail:
| Name | Type | Description |
|---|---|---|
| degree | number | Current degree |
| lastDegree | number | Degree before changing |
| offsetDegree | number | Difference degree from lastDegree to degree
|
spinstart
Cancelable:
trueWould not able to spin the knob if the event is canceled.
Dispatched on start of spinning.
Values of event.detail:
| Name | Type | Description |
|---|---|---|
| degree | number | Current degree |
| lastDegree | number | Degree of beginning. Should be the same as degree
|
| offsetDegree | number | Difference degree from lastDegree to degree. Should be 0
|
spinning
Cancelable:
trueWould temporarily keep the knob from spinning if the event is canceled.
Dispatches on the knob is being spinned.
Values of event.detail:
| Name | Type | Description |
|---|---|---|
| degree | number | Current degree |
| lastDegree | number | Degree of last spinning event |
| offsetDegree | number | Difference degree from the degree of beginning to degree
|
spinend
Cancelable:
false
Dispatches on the end of spinning.
Properties of event.detail is the same as spinstart.
License
Knob.js is MIT licensed.