Knob.js is a HTML element for spinning and getting the degree.
Sets knob with min, max, and degree. Also we can change the size of knob.
An application of knob with CD styled media player.
<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" />
);There are default styled knobs we can use directly without styling knob ourselves.
<knob-dot></knob-dot>
<knob-line></knob-line>
<knob-triangle></knob-triangle>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 flip.js with the command:
npm run buildAnd get the built file at ./dist/knob.min.js.
Properties for setting knob.
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');
}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'));Alias of .degree.
// set value
knob.value = 30;
// get value
console.log('value:', knob.value);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'));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 for knob elements:
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 |
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 |
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 |
Cancelable:
false
Dispatches on the end of spinning.
Properties of event.detail is the same as spinstart.
Knob.js is MIT licensed.