Skip to content
/ knob.js Public

Knob.js is an element for spinning and getting the degree.

License

Notifications You must be signed in to change notification settings

lf2com/knob.js

Repository files navigation

knob.js

Knob.js is a HTML element for spinning and getting the degree.


Demo

Knob

Sets knob with min, max, and degree. Also we can change the size of knob.

CD

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

Dot knob

<knob-dot></knob-dot>

Line Knob

Line knob

<knob-line></knob-line>

Triangle Knob

Triangle knob

<knob-triangle></knob-triangle>

Customize Knob

We can customize knob with knob base element:

Custom knob

⚠️ 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 build

And 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

Default: 0 or the bound value within .min and .max.

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: number

Default 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: number

Default 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: true

Would 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: true

Would 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.