Author: | eskimoblood |
---|---|
Views Total: | 7,610 views |
Official Page: | Go to website |
Last Update: | April 21, 2017 |
License: | MIT |
Preview:

Description:
Jim Knopf is a pure JavaScript library to generating accessible, touch-friendly, SVG based knob/dial controls that can be adjusted by mouse drag, mouse wheel, arrow keys and touch gestures.
How to use it:
Load the minified version of the Jim Knopf library right before the closing body tag.
<script src="dist/knob.min.js"></script>
Create a range input for the knob control. You’re also able to pass the configuration options via data-OPTION attribute as shown below.
<input class="demo" type="range" min="0" max="100" data-width="100" data-height="100" data-angleOffset="220" data-angleRange="280" >
Convert the range input to a basic knob control.
Ui.Demo = function() { }; Ui.Demo.prototype = Object.create(Ui.prototype); Ui.Demo.prototype.createElement = function() { "use strict"; Ui.prototype.createElement.apply(this, arguments); this.addComponent(new Ui.Pointer({ type: 'Rect', pointerWidth: 3, pointerHeight: this.width / 5, offset: this.width / 2 - this.width / 3.3 - this.width / 10 })); this.addComponent(new Ui.Scale(this.merge(this.options, { drawScale: false, drawDial: true, radius: this.width/2.6}))); var circle = new Ui.El.Circle(this.width / 3.3, this.width / 2, this.height / 2); this.el.node.appendChild(circle.node); this.el.node.setAttribute("class", "Demo"); };
Apply your own CSS styles to the knob control.
.Demo rect { fill: #57C7B6; } .Demo g polygon { opacity: 1; } .Demo circle { fill: #256058; stroke: #57C7B6; stroke-width: 2; filter: url(#dropshadow); } .Demo text { font-size: 10px; fill: #57C7B6; font-family: sans-serif; font-weight: 300; -webkit-transition: all .1s ease-in-out; } .Demo text.active { font-size: 15px; -webkit-transition: all .3s ease-in-out; }
All default settings.
{ max: parseFloat(input.max), min: parseFloat(input.min), step: 1, angleoffset: 0, anglerange: 360, labels: labels }