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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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');

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" }); 
 

Destroys the widget.

Code examples

Invoke the destroy method.

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

Sets or gets the value.

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);