jquery plugin to convert number inputs into knobs that can be adjusted by dragging with mouse or fingers
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
stylesheet
.gitattributes
jquery.knobby.js
readme.md

readme.md

jquery.knobby.js

a jquery plugin to convert number input elements into turnable knobs that can be adjusted by cyclic dragging with mouse or fingers - multi-touch is now supported!

Demo

Image of jquery.knobby.js result (dark theme) Image of jquery.knobby.js result (light theme)

You'll find the demo files in the demo/ directory of the repository.

Installation

Load the Javascript file by including the script after jQuery has been included:

<script src="jquery.knobby.js"></script>

And also import the styles:

<link rel="stylesheet" href="jquery.knobby.light.css">

The appearance of the plugin is fully customizable through CSS – you can add a background of your choice or generate a noise background for example. The stylesheets are intended as starting points rather than final states. For performance I recommend to simply add the styles to one of your already loading CSS files instead of linking it severally!

Usage

You need to have an input like the following

<input type="number" name="input_name" min="0" max="10" value="5" />

To convert all inputs with a type of number on a page to knobby-knobs use:

$("input[type=number]").knobby();

You can pass options to configure knobby - the numbers given are the default values:

$(".high-pass").knobby({
    min:0,
    max:100,
    turn:1,
    step:1,
    size:4,
    handleSize:1,
    handleGap:.25
});

Options

The following options can be served as attributes or passed as options - if both is present attribute wins.

attribute description type
min minimum knob value – must be smaller than the max-value float
max maximum knob value – must be larger than the min-value float
step the minimun change of the value; there should be an normal number of steps between min and max ((max-min)/step should result in an integer number) float
turn number of full circles from min to max float
size radius of the knob in em (relative to font-size) of .knobby-knob float
handleSize diameter of the handle in em float
handleGap gap between the outer border of the knob and the handle in em float