jQuery Knob API

Name Type Default

allowValueChangeOnClick Boolean true

Sets or gets whether the jqxKnob's value can be changed on click.

Code examples

Set the allowValueChangeOnClick property.

$('#jqxKnob').jqxKnob({allowValueChangeOnClick: false });

Get the allowValueChangeOnClick property.

var allowValueChangeOnClick = $('#jqxKnob').jqxKnob('allowValueChangeOnClick');

Try it: allowValueChangeOnClick is set to false

allowValueChangeOnDrag Boolean true

Sets or gets whether the jqxKnob's value can be changed by dragging the pointer.

Code examples

Set the allowValueChangeOnDrag property.

$('#jqxKnob').jqxKnob({allowValueChangeOnDrag: false });

Get the allowValueChangeOnDrag property.

var allowValueChangeOnDrag = $('#jqxKnob').jqxKnob('allowValueChangeOnDrag');

Try it: allowValueChangeOnDrag is set to false

allowValueChangeOnMouseWheel Boolean true

Sets or gets whether the jqxKnob's value can be changed on mouse wheel.

Code examples

Set the allowValueChangeOnMouseWheel property.

$('#jqxKnob').jqxKnob({allowValueChangeOnMouseWheel: false });

Get the allowValueChangeOnMouseWheel property.

var allowValueChangeOnMouseWheel = $('#jqxKnob').jqxKnob('allowValueChangeOnMouseWheel');

Try it: allowValueChangeOnMouseWheel is set to false

changing Function null

Sets or gets a function called when the user drags the pointer. The function is called before the pointer is moved and the passed arguments are 2 - oldValue and newValue. If the function returns false, the value will not be changed.

Code examples

Set the changing property.

$('#jqxKnob').jqxKnob({changing: function(oldValue, newValue){} });

Get the changing property.

var changing = $('#jqxKnob').jqxKnob('changing');

Try it: changing is set to function

dragEndAngle Number 0

Sets or gets the Knob's angle where dragging the pointer will end.

Code examples

Set the dragEndAngle property.

$('#jqxKnob').jqxKnob({dragEndAngle: 420 });

Get the dragEndAngle property.

var dragEndAngle = $('#jqxKnob').jqxKnob('dragEndAngle');

Try it: dragEndAngle is set to 420

dragStartAngle Number 360

Sets or gets the Knob's degrees where dragging the pointer can start.

Code examples

Set the dragStartAngle property.

$('#jqxKnob').jqxKnob({dragStartAngle: 120 });

Get the dragStartAngle property.

var dragStartAngle = $('#jqxKnob').jqxKnob('dragStartAngle');

Try it: dragStartAngle is set to 120

disabled Boolean false

Sets or gets whether the Knob is disabled.

Code examples

Set the disabled property.

$('#jqxKnob').jqxKnob({disabled: true });

Get the disabled property.

var disabled = $('#jqxKnob').jqxKnob('disabled');

Try it: disabled is set to true

dial Object null

Sets or gets the Knob's dial.

innerRadius - specifies the inner Radius of the dial.
outerRadius - specifies the outer Radius of the dial.
style - specifies the style of the dial. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), style.strokeWidth - border width.
startAngle - dial's start angle(optional).
endAngle - dial's end angle(optional).

Code examples

Set the dial property.

$('#jqxKnob').jqxKnob({dial: 360 });

Get the dial property.

var dial = $('#jqxKnob').jqxKnob('dial');

Try it: dial is set to custom object

endAngle Number 360

Sets or gets the Knob's degrees offset for the 360 location.

Code examples

Set the endAngle property.

$('#jqxKnob').jqxKnob({endAngle: 360 });

Get the endAngle property.

var endAngle = $('#jqxKnob').jqxKnob('endAngle');

Try it: endAngle is set to 420

height Number 400

Sets or gets the Knob's height.

Code examples

Set the height property.

$('#jqxKnob').jqxKnob({height: 360 });

Get the height property.

var height = $('#jqxKnob').jqxKnob('height');

Try it: height is set to 400

labels Object null

Sets or gets the Knob's labels.

rotate - specifies if labels should be vertical or rotated with the appropriate angle.
offset - specifies the labels offset.
visible - determines the labels visibility.
step - sets the labels step.

formatFunction - function which can be used to format the labels.
Example:


formatFunction: function (label) {
    if (label == 0)
        return "Min";
    if (label == 100)
        return "Max";
    return label;
}

style - specifies the style of the labels. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), style.strokeWidth - border width.

Code examples

Set the labels property.


$('#jqxKnob').jqxKnob({labels: {
    offset: '88%',
    step: 5,
    visible: true,
    formatFunction: function (label) {
        if (label == 0)
            return "Min";
        if (label == 100)
            return "Max";
        return label;
    }
});

Get the labels property.

var labels = $('#jqxKnob').jqxKnob('labels');

Try it: labels is set to custom object

marks Object null

Sets or gets the Knob's marks.

colorProgress - hex color string.
colorRemaining - hex color string.
drawAboveProgressBar - draws the marks with z-index higher than the progress bar.
minorInterval - minor ticks interval.
majorInterval - major ticks interval.
majorSize - major tick's size. Specifies radius in case of circular lines, or length in case of lines.
offset - specifies the labels offset.
size - specifies radius in case of circular lines, or length in case of lines.
type - "circle" or "line".
thickness - specifies thickness in case of lines.
visible - determines the labels visibility.

Code examples

Set the marks property.


$('#jqxKnob').jqxKnob({marks: 
{
    colorRemaining: { color: 'grey', border: 'grey' },
    colorProgress: { color: '#a2da39', border: '#a2da39' },
    type: 'line',
    offset: '71%',
    thickness: 3,
    size: '6%',
    majorSize: '9%',
    majorInterval: 10,
    minorInterval: 2
});

Get the marks property.

var marks = $('#jqxKnob').jqxKnob('marks');

Try it: marks is set to custom object

min Number 0

Sets or gets the Knob's min property.

Code examples

Set the min property.


$('#jqxKnob').jqxKnob({min: 0});

Get the min property.

var min = $('#jqxKnob').jqxKnob('min');

Try it: min is set to 0

max Number 100

Sets or gets the Knob's max property.

Code examples

Set the max property.


$('#jqxKnob').jqxKnob({max: 100});

Get the max property.

var max = $('#jqxKnob').jqxKnob('max');

Try it: max is set to 100

progressBar Object/Array of Objects null

Sets or gets the Knob's progressBar property.

offset - specifies the progress bar's offset.
style - specifies the style of the progressBar. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), style.strokeWidth - border width, style.opacity - opacity values from 0 to 1
background - specifies the background style of the progressBar. background.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), background.strokeWidth - border width, background.opacity - opacity values from 0 to 1
size - specifies the progress bar's size.
ranges - array which specify the progress bar's ranges. object.startValue - range start value. range.endValue - range end value. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), object.stroke - border color(hex string), object.strokeWidth - border width, object.opacity - opacity values from 0 to 1

Code examples

Set the progressBar property.


$('#jqxKnob').jqxKnob({
  progressBar: {
    style: { fill: '#a2da39', stroke: 'grey' },
    size: '9%',
    offset: '60%',
    background: { fill: 'grey', stroke: 'grey' }
  }
});

Get the progressBar property.

var progressBar = $('#jqxKnob').jqxKnob('progressBar');

Try it: progressBar is set to custom object

pointer Object/Array of Objects null

Sets or gets the Knob's pointer property.

type - specifies the pointer's type - "circle", "line", "arrow".
style - specifies the style of the pointer. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), style.strokeWidth - border width.
size - specifies the pointer's size.
thickness - specifies the pointer's thickness.
visible - specifies whether the pointer is visible.

Code examples

Set the pointer property.


$('#jqxKnob').jqxKnob({pointer:
  { type: 'arrow', style: { fill: '#a2da39', stroke: 'grey' }, size: '59%', offset: '49%', thickness: 20 }}
);

Get the pointer property.

var pointer = $('#jqxKnob').jqxKnob('pointer');

Try it: pointer is set to custom object

pointerGrabAction String "normal"

Sets or gets the Knob's pointerGrabAction property("normal", "progressBar", "pointer").

Code examples

Set the pointerGrabAction property.


$('#jqxKnob').jqxKnob(
  {pointerGrabAction: "pointer"}
);

Get the pointerGrabAction property.

var pointerGrabAction = $('#jqxKnob').jqxKnob('pointerGrabAction');

Try it: pointerGrabAction is set to "normal"

rotation String "clockwise"

Sets or gets the Knob's rotation("clockwise" or "counterclockwise").

Code examples

Set the rotation property.


$('#jqxKnob').jqxKnob(
  {rotation: "counterclockwise"}
);

Get the rotation property.

var rotation = $('#jqxKnob').jqxKnob('rotation');

Try it: rotation is set to "counterclockwise"

startAngle Number 0

Sets or gets the Knob's degrees offset for the 0 location.

Code examples

Set the startAngle property.

$('#jqxKnob').jqxKnob({startAngle: 120 });

Get the startAngle property.

var startAngle = $('#jqxKnob').jqxKnob('startAngle');

Try it: startAngle is set to 120

spinner Object null

Sets or gets Knob's spinner.

innerRadius - specifies the inner Radius of the spinner.
outerRadius - specifies the outer Radius of the spinner.
style - specifies the style of the spinner. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), style.strokeWidth - border width.
marks -
- rotate - sets whether spinner marks rotate with pointer.
- colorProgress - hex color string.
- colorRemaining - hex color string.
- drawAboveProgressBar - draws the marks with z-index higher than the progress bar.
- minorInterval - minor ticks interval.
- majorInterval - major ticks interval.
- majorSize - major tick's size. Specifies radius in case of circular lines, or length in case of lines.
- offset - specifies the labels offset.
- size - specifies radius in case of circular lines, or length in case of lines.
- type - "circle" or "line".
- thickness - specifies thickness in case of lines.
- visible - determines the labels visibility.

Code examples

Set the spinner property.


$('#jqxKnob').jqxKnob({spinner:
{
    style: { fill: { color: '#00a4e1', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] }, stroke: '#00a4e1' },
    innerRadius: '45%', // specifies the inner Radius of the dial
    outerRadius: '60%', // specifies the outer Radius of the dial
    marks: {
        colorRemaining: '#fff',
        colorProgress: '#fff',
        type: 'line',
        offset: '46%',
        thickness: 2,
        size: '14%',
        majorSize: '14%',
        majorInterval: 10,
        minorInterval: 10
    }
                
});

Get the spinner property.

var spinner = $('#jqxKnob').jqxKnob('spinner');

Try it: spinner is set to custom object

style Object null

Sets or gets the Knob's background style.

fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]])
stroke - border color(hex string).
strokeWidth - border width.

Code examples

Set the style property.

$('#jqxKnob').jqxKnob({style: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } } });

Get the style property.

var style = $('#jqxKnob').jqxKnob('style');

Try it: style is set to custom object

step Number 1

Sets or gets the Knob's step property. Specifies the increase/decrease step.

Code examples

Set the step property.

$('#jqxKnob').jqxKnob({step: 2});

Get the step property.

var step = $('#jqxKnob').jqxKnob('step');

Try it: step is set to 10

snapToStep Boolean true

Sets or gets the Knob's snapToStep property. Specifies whether setting the knob value will snap to the closest step true/false.

Code examples

Set the snapToStep property.

$('#jqxKnob').jqxKnob({snapToStep: true});

Get the snapToStep property.

var snapToStep = $('#jqxKnob').jqxKnob('snapToStep');

Try it: snapToStep is set to true

value Number/Array of Numbers 0

Sets or gets the Knob's value.

Code examples

Set the value property.

$('#jqxKnob').jqxKnob({value: 23});

Get the value property.

var value = $('#jqxKnob').jqxKnob('value');

Try it: value is set to 60

width Number 400

Sets or gets the Knob's width.

Code examples

Set the width property.

$('#jqxKnob').jqxKnob({width: 400});

Get the width property.

var width = $('#jqxKnob').jqxKnob('width');

Try it: width is set to 400

change Event

This event is triggered when the value is changed.

Code examples

Bind to the change event by type: jqxKnob.

$('#jqxKnob').on('change', 
function (event) {var args = event.args; var value = args.value; var changeSource = args.changeSource; // "pointerMove", "increment", "decrement", "val", "propertyChange" });

Try it: Bind to the change event by type: jqxKnob.

destroy Method

Destroys the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the destroy method.

$('#jqxKnob').jqxKnob('destroy');

Try it: destroys the jqxKnob

val Method

Sets or gets the value.

Parameter	Type	Description
value	String

Return Value
String

Code examples

Get the value:

var value = $('#jqxKnob').jqxKnob('val'); or var value = $('#jqxKnob').val();

Set the value:

$('#jqxKnob').jqxKnob('val', 50); or $('#jqxKnob').val(50);

Try it: sets the jqxKnob value

Properties

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Events

Code examples

Methods

Code examples

Code examples