Tank API Reference

coerce boolean false

If is set to true all values coerce to the interval, set in the interval property.

Code examples

Set the coerce property.

 let tank = document.querySelector('jqx-tank');

 tank.coerce = false;

Get the coerce property.

 let tank = document.querySelector('jqx-tank');

 let coerce = tank.coerce;

decimalSeparator string "."

Sets or gets the char to use as the decimal separator in numeric values.

Code examples

Set the decimalSeparator property.

 let tank = document.querySelector('jqx-tank');

 tank.decimalSeparator = '.';

Get the decimalSeparator property.

 let tank = document.querySelector('jqx-tank');

 let decimalSeparator = tank.decimalSeparator;

disabled boolean false

Enables or disables the widget.

Code examples

Set the disabled property.

 let tank = document.querySelector('jqx-tank');

 tank.disabled = false;

Get the disabled property.

 let tank = document.querySelector('jqx-tank');

 let disabled = tank.disabled;

interval any 1

When cooerce property is true, all values coerce to the interval's value.

Code examples

Set the interval property.

 let tank = document.querySelector('jqx-tank');

 tank.interval = 10;

Get the interval property.

 let tank = document.querySelector('jqx-tank');

 let interval = tank.interval;

inverted boolean false

Sets the direction of the tank. If is true - positions of the tank's begin and end are changed.

Code examples

Set the inverted property.

 let tank = document.querySelector('jqx-tank');

 tank.inverted = false;

Get the inverted property.

 let tank = document.querySelector('jqx-tank');

 let inverted = tank.inverted;

labelFormatFunction function null

A callback function that can be used to format the values displayed on the tank labels.

Code examples

Set the labelFormatFunction property.

 let tank = document.querySelector('jqx-tank');

 tank.labelFormatFunction = function (value) { return value + '$'; };

Get the labelFormatFunction property.

 let tank = document.querySelector('jqx-tank');

 let labelFormatFunction = tank.labelFormatFunction;

labelsVisibility string all

Sets or gets the widget's label visibility Possible values: 'all', 'endPoints', 'none'.

Code examples

Set the labelsVisibility property.

 let tank = document.querySelector('jqx-tank');

 tank.labelsVisibility = 'none';

Get the labelsVisibility property.

 let tank = document.querySelector('jqx-tank');

 let labelsVisibility = tank.labelsVisibility;

language string en

Sets or gets the language. Used in conjunction with the property messages.

Code examples

Set the language property.

 let tank = document.querySelector('jqx-tank');

 tank.language = 'fr';

Get the language property.

 let tank = document.querySelector('jqx-tank');

 let language = tank.language;

logarithmicScale boolean false

Enables/disables the usage of logarithmic scale in the widget.

Code examples

Set the logarithmicScale property.

 let tank = document.querySelector('jqx-tank');

 tank.logarithmicScale = false;

Get the logarithmicScale property.

 let tank = document.querySelector('jqx-tank');

 let logarithmicScale = tank.logarithmicScale;

max any 100

Sets or gets the maximum value of the widget.

Code examples

Set the max property.

 let tank = document.querySelector('jqx-tank');

 tank.max = 50;

Get the max property.

 let tank = document.querySelector('jqx-tank');

 let max = tank.max;

mechanicalAction string switchWhileDragging

Sets or gets the type of used mechanical action. Possible values: 'switchUntilReleased', 'switchWhenReleased', 'switchWhileDragging'.

Code examples

Set the mechanicalAction property.

 let tank = document.querySelector('jqx-tank');

 tank.mechanicalAction = 'switchUntilReleased';

Get the mechanicalAction property.

 let tank = document.querySelector('jqx-tank');

 let mechanicalAction = tank.mechanicalAction;

messages object { "en": { "missingReference": "jqxTank: Missing reference to {{files}}.", "significantPrecisionDigits": "jqxTank: the properties significantDigits and precisionDigits cannot be set at the same time.", "invalidMinOrMax": "jqxTank: Invalid {{property}} value. Max cannot be lower than Min.", "noInteger": "jqxTank: precisionDigits could be set only on floatingPoint scaleType." } }

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property language.

Code examples

Set the messages property.

 let tank = document.querySelector('jqx-tank');

 tank.messages = { "de": { "missingReference": "jqxTank: Fehlende Bezugnahme auf {{files}}.", "significantPrecisionDigits": "jqxTank: Die Eigenschaften significantDigits und precisionDigits koennen nicht gleichzeitig eingestellt werden." } };

Get the messages property.

 let tank = document.querySelector('jqx-tank');

 let messages = tank.messages;

min any 0

Sets or gets the minimum value of the widget.

Code examples

Set the min property.

 let tank = document.querySelector('jqx-tank');

 tank.min = 50;

Get the min property.

 let tank = document.querySelector('jqx-tank');

 let min = tank.min;

orientation string vertical

Sets the orientation of the widget Possible values: 'horizontal', 'vertical'.

Code examples

Set the orientation property.

 let tank = document.querySelector('jqx-tank');

 tank.orientation = 'horizontal';

Get the orientation property.

 let tank = document.querySelector('jqx-tank');

 let orientation = tank.orientation;

precisionDigits number null

Determines the number of digits after the decimal point. Applicable only when scaleType is 'integer'.

Code examples

Set the precisionDigits property.

 let tank = document.querySelector('jqx-tank');

 tank.precisionDigits = 6;

Get the precisionDigits property.

 let tank = document.querySelector('jqx-tank');

 let precisionDigits = tank.precisionDigits;

readonly boolean false

If the widgets is readonly, the users cannot iteract with the element.

Code examples

Set the readonly property.

 let tank = document.querySelector('jqx-tank');

 tank.readonly = true;

Get the readonly property.

 let tank = document.querySelector('jqx-tank');

 let readonly = tank.readonly;

scalePosition string near

Sets the position of the widget's scales. Possible values: 'near', 'far', 'both', 'none'.

Code examples

Set the scalePosition property.

 let tank = document.querySelector('jqx-tank');

 tank.scalePosition = 'both';

Get the scalePosition property.

 let tank = document.querySelector('jqx-tank');

 let scalePosition = tank.scalePosition;

scaleType string floatingPoint

Sets the type of the tank's scale. Possible values: 'floatingPoint', 'integer'.

Code examples

Set the scaleType property.

 let tank = document.querySelector('jqx-tank');

 tank.scaleType = 'floatingPoint';

Get the scaleType property.

 let tank = document.querySelector('jqx-tank');

 let scaleType = tank.scaleType;

scientificNotation boolean false

Enables/disables scientific notation.

Code examples

Set the scientificNotation property.

 let tank = document.querySelector('jqx-tank');

 tank.scientificNotation = true;

Get the scientificNotation property.

 let tank = document.querySelector('jqx-tank');

 let scientificNotation = tank.scientificNotation;

showTooltip boolean false

Enables/disables displaying of the tooltip.

Code examples

Set the showTooltip property.

 let tank = document.querySelector('jqx-tank');

 tank.showTooltip = true;

Get the showTooltip property.

 let tank = document.querySelector('jqx-tank');

 let showTooltip = tank.showTooltip;

showUnit boolean false

Enables/disables displaying of the units.

Code examples

Set the showUnit property.

 let tank = document.querySelector('jqx-tank');

 tank.showUnit = false;

Get the showUnit property.

 let tank = document.querySelector('jqx-tank');

 let showUnit = tank.showUnit;

significantDigits number null

Determining how many significant digits are in a number. Applicable only when scaleType is 'integer'.

Code examples

Set the significantDigits property.

 let tank = document.querySelector('jqx-tank');

 tank.significantDigits = 2;

Get the significantDigits property.

 let tank = document.querySelector('jqx-tank');

 let significantDigits = tank.significantDigits;

ticksPosition string scale

Sets or gets the position of the ticks in jqxTank widget. Possible values: 'scale', 'track'.

Code examples

Set the ticksPosition property.

 let tank = document.querySelector('jqx-tank');

 tank.ticksPosition = 'scale';

Get the ticksPosition property.

 let tank = document.querySelector('jqx-tank');

 let ticksPosition = tank.ticksPosition;

ticksVisibility string minor

Sets or gets the visibility of the ticks. Possible values: 'major', 'minor', 'none'.

Code examples

Set the ticksVisibility property.

 let tank = document.querySelector('jqx-tank');

 tank.ticksVisibility = 'none';

Get the ticksVisibility property.

 let tank = document.querySelector('jqx-tank');

 let ticksVisibility = tank.ticksVisibility;

tooltipPosition string near

Sets or gets the position of the tooltip in jqxTank widget. Possible values: 'near', 'far'.

Code examples

Set the tooltipPosition property.

 let tank = document.querySelector('jqx-tank');

 tank.tooltipPosition = 'near';

Get the tooltipPosition property.

 let tank = document.querySelector('jqx-tank');

 let tooltipPosition = tank.tooltipPosition;

unit string kg

Sets or gets the name of unit used in jqxTank widget.

Code examples

Set the unit property.

 let tank = document.querySelector('jqx-tank');

 tank.unit = 'cm';

Get the unit property.

 let tank = document.querySelector('jqx-tank');

 let unit = tank.unit;

value number 0

Sets or gets the value of the jqxTank widget.

Code examples

Set the value property.

 let tank = document.querySelector('jqx-tank');

 tank.value = 100;

Get the value property.

 let tank = document.querySelector('jqx-tank');

 let value = tank.value;

wordLength string int32

Sets or gets the word length. Applicable only when scaleType is 'integer'. Possible values: 'int8', 'uint8', 'int16', 'uint16', 'int32', 'uint32', 'int64', 'uint64'.

Code examples

Set the wordLength property.

 let tank = document.querySelector('jqx-tank');

 tank.wordLength = 'int16';

Get the wordLength property.

 let tank = document.querySelector('jqx-tank');

 let wordLength = tank.wordLength;

change Event

This event is triggered when the value of the tank is changed.

Code examples

Bind to the change event by type: jqxTank

 let tank = document.querySelector('jqx-tank');

 tank.addEventListener('change', function (event) {
     // event handling code goes here.
 }

focus Method

Focuses the tank.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the focus method.

 let tank = document.querySelector('jqx-tank');

 tank.focus();

getOptimalSize Method

Gets the optimal size of the widget.

Parameter	Type	Description
None

Return Value
Object

Code examples

Invoke the getOptimalSize method.

 let tank = document.querySelector('jqx-tank');

 tank.getOptimalSize();

val Method

Get/set the value of the tank.

Parameter	Type	Description
value	string/number	The value to be set. If no parameter is passed, returns the displayed value of the tank.
suppressValidation	boolean	If true* is passed, the passed value will be set to the tank without validation.*

Return Value
String

Code examples

Invoke the val method.

// Get the value.

 let tank = document.querySelector('jqx-tank');

 let val = tank.val();

// Set the value.

 let tank = document.querySelector('jqx-tank');

 tank.val('10');

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

Code examples

Code examples

Code examples

Events

Code examples

Methods

Code examples

Code examples

Code examples