daverobertson63 / input-knobs

input-knobs.js

---

input-knobs.js Sample Page

---

Features

input-knobs.js is a Javascript library for Rotating Knobs / Horizontal & Vertical Sliders / Toggle Switches / Radio Buttons style GUI widgets. This is a sub-set of "webaudio-controls" and simply replace the appearance of <input/> tags to rotating knobs, sliders or switches.

Tag	Change to
<input type="range" class="input-knob"/>	Rotating Knob
<input type="range" class="input-slider"/>	Horizontal & Vertical Slider
<input type="checkbox" class="input-switch"/>	Toggle Switch
<input type="radio" class="input-switch"/>	Radio Button

• Easy to use by place and load just one file input-knobs.js.
• Compatible with Chrome / Firefox / Safari / Edge.
• Lightweighted. No other libraries are required.
• 'input' and 'change' events are fired same as normal input tags.
• Work even under 'file:///' protocol.
• Touch devices support.

Usage

• Place input-knobs.js to appropriate folder
• Load input-knobs.js :

  <script src="input-knobs.js"></script>
  

• Add class 'input-knob', 'input-hslider', 'input-vslider' or 'input-switches' to input tags in your HTML
• Some optional attributes (data-*) are available for customize

Operation

There are some tips for knobs and sliders operation :

Operation	Description
Mouse dragging	Upward / Right for increase value, Downward / Left for decrease value
ShiftKey + dragging	Fine adjustment, 1/5 sensitivity to mouse movement
Mouse Wheel	Upward : increase value Downward : descrease value
ShiftKey + Mouse Wheel	Fine adjustment, 1/5 sensitivity to mouse movement
Keyboard (after focused)	Up / Right arrow : increment value Down / Left arrow : decrement value

Attributes

Attribute	Description
data-diameter = "nnn"	Set the width and height of the knobs or switches in 'px'.This is equivarent to 'data-width="nnn" data-height="nnn"'. In default, 64 for knobs and 32 for switches.
data-width = "nnn" data-height = "nnn"	Set the width and height of the knobs, sliders or switches individually in 'px'. In default, 64 for knobs, 128 for sliders and 32 for switches. If the size for slider is vertically long, the slider will be a vertical slider.
data-src = "Image URL"	Use external image for the knobs/switches. For Knobs, the image should be single knob-image that pointing upward (12 O'clock), or a vertically stitched knob-images that represent rotation of the knob frame by frame. For Sliders, the image should be a vertically stitched slider-images that represent thumb sliding from min value to max value frame by frame. For Switches, this image should be a vertically stitched Off state and On state image. If no image is supplied, input-knobs uses knob/slider/switch images embedded inside (black body and red indicator)
data-sprites = "nnn"	For Knob / Sliders only. If you use frame stitched knob/slider-image, this attribute should be the number of frames - 1. The knobs that specified 'data-src' but not specified this attribute, it will use image rotation instead of frame switching procedure. The sliders that specified 'data-src' but not specified this attribute, the image is used as slider thumb part and the background is filled by 'data-bgcolor' .
data-fgcolor = "color"	Change Knob / Slider / Switch 's pointer color when no external image (data-src) is used. Default is red "#f00".
data-bgcolor = "color"	Change Knob / Slider / Switch 's background color when no external image (data-src) is used.Default is black "#000".

License

input-knobs.js is released under the MIT License.
Knob/Switch images in samples are from KnobGallery, toggle switch image by az (c) 2011 CC-BY

---