Tank JAVASCRIPT UI Component API

Tank Javascript API

Class

Tank

Tank is a UI Component used in Engineering and Scientific applications. It is broadly used to display the fluid levels.

Controls the animation mode by setting or retrieving its current state. When set to 'none', all animations are disabled and transitions will not occur. Use this property to enable, disable, or modify animation behavior according to your application's requirements.

Allowed Values

"none" - animation is disabled
"simple" - ripple animation is disabled
"advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property.

 <smart-tank animation='none'></smart-tank>

Set the animation property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.animation = 'simple';

Get the animation property.

 const tank = document.querySelector('smart-tank');

 let animation = tank.animation;

coerceboolean

When set to true, all values will be automatically adjusted (coerced) to fit within the range specified by the interval property. This ensures that any value outside the defined interval is converted to the nearest valid value within that range.

Default value

false

Example

Set the coerce property.

 <smart-tank coerce></smart-tank>

Set the coerce property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.coerce = false;

Get the coerce property.

 const tank = document.querySelector('smart-tank');

 let coerce = tank.coerce;

customIntervalboolean

Controls whether custom tick marks, which may be spaced at uneven intervals, are displayed on the axis. The specific positions of these ticks are specified using the customTicks property. This option can be used to enable or disable the rendering of these custom-defined ticks.

Default value

false

Example

Set the customInterval property.

 <smart-tank custom-interval></smart-tank>

Set the customInterval property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.customInterval = false;

Get the customInterval property.

 const tank = document.querySelector('smart-tank');

 let customInterval = tank.customInterval;

customTicksnumber[]

If customInterval is enabled, this option provides a specific list of tick values to display on the plot's axis, overriding any automatically calculated intervals. When coerce is set to true, user inputs or plotted values will automatically adjust (or "snap") to the nearest tick in this list, ensuring all values align precisely with one of the specified ticks.

Example

Set the customTicks property.

 <smart-tank custom-ticks='[100, 200, 1000, 8000, 10000]'></smart-tank>

Set the customTicks property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.customTicks = [1, 3, 5, 8];

Get the customTicks property.

 const tank = document.querySelector('smart-tank');

 let customTicks = tank.customTicks;

dateLabelFormatStringstring

Specifies or retrieves the pattern used to format labels when the mode property is set to 'date'. This pattern determines how date labels are displayed to the user (for example, "MM/DD/YYYY" or "dd MMM, yyyy").

Default value

"d"

Example

Set the dateLabelFormatString property.

 <smart-tank date-label-format-string='dddd-MMMM-yyyy'></smart-tank>

Set the dateLabelFormatString property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.dateLabelFormatString = 'FP';

Get the dateLabelFormatString property.

 const tank = document.querySelector('smart-tank');

 let dateLabelFormatString = tank.dateLabelFormatString;

decimalSeparatorstring

Specifies or retrieves the character used as the decimal separator in numeric values. This determines how decimal points are displayed when formatting or parsing numbers (e.g., use "." for 12.34 or "," for 12,34, depending on locale or formatting requirements).

Default value

"".""

Example

Set the decimalSeparator property.

 <smart-tank decimal-separator=','></smart-tank>

Set the decimalSeparator property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.decimalSeparator = '.';

Get the decimalSeparator property.

 const tank = document.querySelector('smart-tank');

 let decimalSeparator = tank.decimalSeparator;

disabledboolean

Determines whether the widget is active and visible to users. When enabled, the widget functions normally and is displayed in the user interface; when disabled, the widget is hidden or inactive, preventing user interaction.

Default value

false

Example

Set the disabled property.

 <smart-tank disabled></smart-tank>

Set the disabled property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.disabled = false;

Get the disabled property.

 const tank = document.querySelector('smart-tank');

 let disabled = tank.disabled;

intervalstring | number

When the 'coerce' property is set to 'true', any input values that fall outside the specified interval will be automatically adjusted ("coerced") to the nearest boundary value of the interval. This ensures that all resulting values strictly adhere to the defined range, preventing any out-of-bounds input.

Default value

Example

Set the interval property.

 <smart-tank interval='2'></smart-tank>

Set the interval property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.interval = 10;

Get the interval property.

 const tank = document.querySelector('smart-tank');

 let interval = tank.interval;

invertedboolean

Defines the orientation of the tank. When set to true, the positions of the tank's front and rear are swapped, effectively reversing its direction.

Default value

false

Example

Set the inverted property.

 <smart-tank inverted></smart-tank>

Set the inverted property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.inverted = false;

Get the inverted property.

 const tank = document.querySelector('smart-tank');

 let inverted = tank.inverted;

labelFormatFunctionfunction | null

A user-defined callback function that formats the values shown on the tank labels before they are displayed. This function receives the raw value as an argument and should return the formatted string to be rendered on the label, allowing for custom display logic such as unit conversion, number formatting, or localization.

Example

Set the labelFormatFunction property.

 <smart-tank label-format-function='function (value) { return value + '%'; }'></smart-tank>

Set the labelFormatFunction property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

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

Get the labelFormatFunction property.

 const tank = document.querySelector('smart-tank');

 let labelFormatFunction = tank.labelFormatFunction;

labelsVisibility"all" | "endPoints" | "none"

Controls the visibility of the widget's label. When set, this property determines whether the label is displayed or hidden. When retrieved, it indicates the current visibility state of the label.

Default value

"all"

Example

Set the labelsVisibility property.

 <smart-tank labels-visibility='endPoints'></smart-tank>

Set the labelsVisibility property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.labelsVisibility = 'none';

Get the labelsVisibility property.

 const tank = document.querySelector('smart-tank');

 let labelsVisibility = tank.labelsVisibility;

unlockKeystring

Retrieves or assigns the unlockKey property, which serves as a security token or code required to activate and access the product's full functionality.

Default value

Example

Set the unlockKey property.

 <smart-tank unlock-key=''></smart-tank>

Set the unlockKey property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.unlockKey = '1111-2222-3333-4444-5555';

Get the unlockKey property.

 const tank = document.querySelector('smart-tank');

 let unlockKey = tank.unlockKey;

localestring

Specifies the current locale for the application. This property determines language and regional formatting, and works together with the messages property to provide appropriate translations and locale-specific content. Use this property to get or set the active locale for displaying messages and other localized resources.

Default value

"en"

Example

Set the locale property.

 <smart-tank locale='de'></smart-tank>

Set the locale property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.locale = 'fr';

Get the locale property.

 const tank = document.querySelector('smart-tank');

 let locale = tank.locale;

localizeFormatFunctionfunction | null

Callback function associated with the localization module. This callback is triggered during localization operations, such as language selection, translation processing, or locale updates, to handle custom logic or respond to localization events within the application.

Example

Set the localizeFormatFunction property.

 <smart-tank localize-format-function='function(){return '...'}'></smart-tank>

Set the localizeFormatFunction property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.localizeFormatFunction = function(){return '...'};

Get the localizeFormatFunction property.

 const tank = document.querySelector('smart-tank');

 let localizeFormatFunction = tank.localizeFormatFunction;

logarithmicScaleboolean

Determines whether the widget displays data using a logarithmic scale. When enabled, values are plotted on a logarithmic scale instead of a linear scale, which can help visualize data with a wide range of values. When disabled, the widget uses a standard linear scale.

Default value

false

Example

Set the logarithmicScale property.

 <smart-tank logarithmic-scale></smart-tank>

Set the logarithmicScale property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.logarithmicScale = false;

Get the logarithmicScale property.

 const tank = document.querySelector('smart-tank');

 let logarithmicScale = tank.logarithmicScale;

maxstring | number

Gets or sets the maximum allowable value for the widget, defining the upper limit that users can select or enter.

Default value

100

Example

Set the max property.

 <smart-tank max='20'></smart-tank>

Set the max property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.max = 50;

Get the max property.

 const tank = document.querySelector('smart-tank');

 let max = tank.max;

mechanicalAction"switchUntilReleased" | "switchWhenReleased" | "switchWhileDragging"

Defines or retrieves the specific type of mechanical action being applied. This property allows you to specify what kind of mechanical action to use (such as momentary, toggle, or latching), or to query the current mechanical action configuration.

Default value

"switchWhileDragging"

Example

Set the mechanicalAction property.

 <smart-tank mechanical-action='switchWhenReleased'></smart-tank>

Set the mechanicalAction property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.mechanicalAction = 'switchUntilReleased';

Get the mechanicalAction property.

 const tank = document.querySelector('smart-tank');

 let mechanicalAction = tank.mechanicalAction;

messagesobject

Defines or retrieves an object containing the localizable text strings used throughout the widget interface. This property allows you to customize the widget’s displayed messages for different languages and regions. It is typically used together with the locale property to support internationalization and provide translations based on the user’s locale settings.

Default value

"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",

"significantPrecisionDigits": "{{elementType}}: the properties significantDigits and precisionDigits cannot be set at the same time.",

"invalidMinOrMax": "{{elementType}}: Invalid {{property}} value. Max cannot be lower than Min.",

"noInteger": "{{elementType}}: precisionDigits could be set only on \"floatingPoint\" scaleType."

}

Example

Set the messages property.

 <smart-tank messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss.","significantPrecisionDigits":"{{elementType}}: Die Eigenschaften significantDigits und precisionDigits konnen nicht gleichzeitig eingestellt werden.","invalidMinOrMax":"{{elementType}}: Ungultiger Wert {{property}} Max kann nicht niedriger sein als Min.","noInteger":"{{elementType}}: precisionDigits konnte nur fur \"floatingPoint\" scaleType festgelegt werden."}}'></smart-tank>

Set the messages property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.","significantPrecisionDigits":"{{elementType}}: the properties significantDigits and precisionDigits cannot be set at the same time.","invalidMinOrMax":"{{elementType}}: Invalid {{property}} value. Max cannot be lower than Min.","noInteger":"{{elementType}}: precisionDigits could be set only on \"floatingPoint\" scaleType."}};

Get the messages property.

 const tank = document.querySelector('smart-tank');

 let messages = tank.messages;

minstring | number

Defines or retrieves the minimum allowable value for the widget. When setting this property, it restricts user input so that values below the specified minimum are not permitted. When getting this property, it returns the current minimum value constraint of the widget.

Default value

Example

Set the min property.

 <smart-tank min='20'></smart-tank>

Set the min property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.min = 50;

Get the min property.

 const tank = document.querySelector('smart-tank');

 let min = tank.min;

mode"numeric" | "date"

Determines whether the widget processes and displays numeric values or date values. This property can be set to configure the expected data type (numbers or dates), and can also be accessed to check the current mode of the widget.

Default value

"numeric"

Example

Set the mode property.

 <smart-tank mode='date'></smart-tank>

Set the mode property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.mode = 'numeric';

Get the mode property.

 const tank = document.querySelector('smart-tank');

 let mode = tank.mode;

namestring

Defines or retrieves the element's name attribute. This name uniquely identifies the element within a form and is used as the key when the form data is submitted to the server, allowing the associated value to be referenced and processed.

Default value

Example

Set the name property.

 <smart-tank name='tank1'></smart-tank>

Set the name property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.name = 'tank2';

Get the name property.

 const tank = document.querySelector('smart-tank');

 let name = tank.name;

orientation"horizontal" | "vertical"

Specifies the layout direction of the widget, determining whether its content is arranged horizontally, vertically, or in another supported orientation.

Default value

"vertical"

Example

Set the orientation property.

 <smart-tank orientation='vertical'></smart-tank>

Set the orientation property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.orientation = 'horizontal';

Get the orientation property.

 const tank = document.querySelector('smart-tank');

 let orientation = tank.orientation;

precisionDigitsnumber

Specifies the number of digits to display after the decimal point in numeric values. This setting is only applicable when scaleType is set to 'integer'.

Example

Set the precisionDigits property.

 <smart-tank precision-digits='5'></smart-tank>

Set the precisionDigits property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.precisionDigits = 6;

Get the precisionDigits property.

 const tank = document.querySelector('smart-tank');

 let precisionDigits = tank.precisionDigits;

readonlyboolean

If the widget is set to read-only, users will not be able to interact with or modify the element's content. Any input or actions from users will be disabled, ensuring that the widget's state remains unchanged.

Default value

false

Example

Set the readonly property.

 <smart-tank readonly></smart-tank>

Set the readonly property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.readonly = true;

Get the readonly property.

 const tank = document.querySelector('smart-tank');

 let readonly = tank.readonly;

rightToLeftboolean

Gets or sets a value that specifies whether the element’s content is aligned to accommodate right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element’s alignment and text direction are adjusted for proper display in RTL locales.

Default value

false

Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property.

 <smart-tank right-to-left></smart-tank>

Set the rightToLeft property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.rightToLeft = true;

Get the rightToLeft property.

 const tank = document.querySelector('smart-tank');

 let rightToLeft = tank.rightToLeft;

scalePosition"near" | "far" | "both" | "none"

Specifies the placement of the widget’s scales relative to its main content, determining where the scale markers or labels appear within the widget interface (e.g., top, bottom, left, or right).

Default value

"near"

Example

Set the scalePosition property.

 <smart-tank scale-position='far'></smart-tank>

Set the scalePosition property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.scalePosition = 'both';

Get the scalePosition property.

 const tank = document.querySelector('smart-tank');

 let scalePosition = tank.scalePosition;

scaleType"floatingPoint" | "integer"

Specifies the measurement system used for the tank's scale, such as linear, logarithmic, or custom, which determines how values are displayed and interpreted on the tank's indicator.

Default value

"floatingPoint"

Example

Set the scaleType property.

 <smart-tank scale-type='integer'></smart-tank>

Set the scaleType property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.scaleType = 'floatingPoint';

Get the scaleType property.

 const tank = document.querySelector('smart-tank');

 let scaleType = tank.scaleType;

scientificNotationboolean

Determines whether numerical values are displayed using scientific notation (e.g., 1.23e+6 instead of 1230000). Set to true to enable scientific notation, or false to display numbers in standard decimal format.

Default value

false

Example

Set the scientificNotation property.

 <smart-tank scientific-notation></smart-tank>

Set the scientificNotation property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.scientificNotation = true;

Get the scientificNotation property.

 const tank = document.querySelector('smart-tank');

 let scientificNotation = tank.scientificNotation;

showThumbLabelboolean

Controls whether the thumb label is visible or hidden. When enabled, the thumb label will be displayed alongside the slider's handle, providing users with a visual indicator of the current value. When disabled, the thumb label will not appear.

Default value

false

Example

Set the showThumbLabel property.

 <smart-tank show-thumb-label></smart-tank>

Set the showThumbLabel property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.showThumbLabel = true;

Get the showThumbLabel property.

 const tank = document.querySelector('smart-tank');

 let showThumbLabel = tank.showThumbLabel;

showTooltipboolean

Controls whether the tooltip is visible to the user. When enabled, the tooltip will be displayed; when disabled, the tooltip will be hidden.

Default value

false

Example

Set the showTooltip property.

 <smart-tank show-tooltip></smart-tank>

Set the showTooltip property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.showTooltip = true;

Get the showTooltip property.

 const tank = document.querySelector('smart-tank');

 let showTooltip = tank.showTooltip;

showUnitboolean

Controls whether unit labels (such as "kg", "cm", "°C") are shown alongside values. Set to true to display units next to values, or false to hide them.

Default value

false

Example

Set the showUnit property.

 <smart-tank show-unit></smart-tank>

Set the showUnit property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.showUnit = false;

Get the showUnit property.

 const tank = document.querySelector('smart-tank');

 let showUnit = tank.showUnit;

significantDigitsnumber

Calculates the number of significant digits present in a given number. This process is only relevant and performed when the scaleType property is set to 'integer'. This property should be used to ensure numerical data integrity and appropriate formatting for integer-based values.

Default value

Example

Set the significantDigits property.

 <smart-tank significant-digits='1'></smart-tank>

Set the significantDigits property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.significantDigits = 2;

Get the significantDigits property.

 const tank = document.querySelector('smart-tank');

 let significantDigits = tank.significantDigits;

themestring

Sets or retrieves the visual theme applied to the element, determining its overall appearance such as color scheme, typography, and style variants. This property allows dynamic customization of the element’s look to match different design requirements or user preferences.

Default value

Example

Set the theme property.

 <smart-tank theme='material'></smart-tank>

Set the theme property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.theme = 'material-purple';

Get the theme property.

 const tank = document.querySelector('smart-tank');

 let theme = tank.theme;

thumbLabelPosition"near" | "far"

Sets or retrieves the current position of the thumb label, typically representing the value indicator on a slider or range input. This property allows you to programmatically control or access the exact location of the label relative to the slider track.

Default value

"near"

Example

Set the thumbLabelPosition property.

 <smart-tank thumb-label-position='far'></smart-tank>

Set the thumbLabelPosition property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.thumbLabelPosition = 'near';

Get the thumbLabelPosition property.

 const tank = document.querySelector('smart-tank');

 let thumbLabelPosition = tank.thumbLabelPosition;

ticksPosition"scale" | "track"

Defines or retrieves the placement of the tick marks in the smartTank widget, specifying where the ticks are displayed relative to the tank (e.g., near, far, or both sides). This property allows you to control the visual positioning of the tick indicators along the scale of the smartTank widget.

Default value

"scale"

Example

Set the ticksPosition property.

 <smart-tank ticks-position='track'></smart-tank>

Set the ticksPosition property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.ticksPosition = 'scale';

Get the ticksPosition property.

 const tank = document.querySelector('smart-tank');

 let ticksPosition = tank.ticksPosition;

ticksVisibility"major" | "minor" | "none"

Controls whether the ticks are visible or hidden. This property allows you to enable (show) or disable (hide) the display of tick marks on the relevant component. When set, it determines if ticks are rendered; when accessed, it returns the current visibility state of the ticks.

Default value

"minor"

Example

Set the ticksVisibility property.

 <smart-tank ticks-visibility='major'></smart-tank>

Set the ticksVisibility property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.ticksVisibility = 'none';

Get the ticksVisibility property.

 const tank = document.querySelector('smart-tank');

 let ticksVisibility = tank.ticksVisibility;

tooltipPosition"near" | "far"

Specifies or retrieves the position of the tooltip displayed on the smartTank widget. This property determines where the tooltip appears relative to the tank control (e.g., top, bottom, left, or right). Use this option to customize the tooltip's placement for improved user experience and interface alignment.

Default value

"near"

Example

Set the tooltipPosition property.

 <smart-tank tooltip-position='far'></smart-tank>

Set the tooltipPosition property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.tooltipPosition = 'near';

Get the tooltipPosition property.

 const tank = document.querySelector('smart-tank');

 let tooltipPosition = tank.tooltipPosition;

unfocusableboolean

Determines whether the element is focusable by setting or retrieving its ability to receive keyboard or mouse focus. If set to true, the element can be targeted by user interactions such as tab navigation or clicking.

Default value

false

Example

Set the unfocusable property.

 <smart-tank unfocusable></smart-tank>

Set the unfocusable property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.unfocusable = false;

Get the unfocusable property.

 const tank = document.querySelector('smart-tank');

 let unfocusable = tank.unfocusable;

unitstring

Specifies or retrieves the unit label displayed on the smartTank widget, indicating the measurement unit (e.g., "°C", "kg", "psi") associated with the tank's value. This property allows you to customize the text that appears alongside the value in the widget for better context and readability.

Default value

"kg"

Example

Set the unit property.

 <smart-tank unit='mm'></smart-tank>

Set the unit property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.unit = 'cm';

Get the unit property.

 const tank = document.querySelector('smart-tank');

 let unit = tank.unit;

validation"strict" | "interaction"

Enhances value validation using minimum and maximum boundaries.
- When set to 'strict', all values—whether changed by user interaction or programmatically—are always constrained within the defined min and max limits. Any attempt to set a value outside this range will automatically adjust (coerce) it to the closest valid boundary.
- When set to 'interaction', only values changed by user interaction (such as form input) are validated against min and max. Programmatic updates can set values outside this range, and if the min or max properties are later adjusted such that the current value falls out of bounds, the existing value remains unchanged and is not coerced. In these cases, no change event is triggered.

Default value

"strict"

Example

Set the validation property.

 <smart-tank validation='left'></smart-tank>

Set the validation property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.validation = 'right';

Get the validation property.

 const tank = document.querySelector('smart-tank');

 let validation = tank.validation;

valueany

Gets the current value of the smartTank widget or sets it to a specified value. This property or method enables you to retrieve the widget's current position (value) or assign a new value programmatically, allowing for dynamic interaction and control over the smartTank component.

Default value

Example

Set the value property.

 <smart-tank value='50'></smart-tank>

Set the value property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.value = 100;

Get the value property.

 const tank = document.querySelector('smart-tank');

 let value = tank.value;

wordLength"int8" | "uint8" | "int16" | "uint16" | "int32" | "uint32" | "int64" | "uint64"

Specifies or retrieves the word length used for numeric representation. This property is relevant only when the scaleType is set to 'integer'. In such cases, it determines the number of bits allocated for each integer value. For other scaleType values, this setting has no effect.

Default value

"int32"

Example

Set the wordLength property.

 <smart-tank word-length='int8'></smart-tank>

Set the wordLength property by using the HTML Element's instance.

 const tank = document.querySelector('smart-tank');

 tank.wordLength = 'int16';

Get the wordLength property.

 const tank = document.querySelector('smart-tank');

 let wordLength = tank.wordLength;

Events

changeCustomEvent

This event is triggered whenever the tank’s value is updated, whether through user interaction or programmatic changes. It allows listeners to respond immediately to any modification in the tank’s current state.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onChange

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of change event.

const tank = document.querySelector('smart-tank');
tank.addEventListener('change', function (event) {
	// event handling code goes here.
})

Methods

focus(): void

Locks the keyboard and mouse input exclusively on the tank component, ensuring that all user interactions are directed to the tank (such as movement and firing controls) while disabling interactions with other interface elements.

Invoke the focus method.

const tank = document.querySelector('smart-tank');
tank.focus();

getOptimalSize(): object

Retrieves the recommended dimensions (width and height) for the widget based on its content and layout constraints, ensuring optimal display and usability.

Returnsobject

Invoke the getOptimalSize method.

const tank = document.querySelector('smart-tank');
const result = tank.getOptimalSize();

val( value?: string | number): string

Retrieves or updates the current value stored in the tank. Use this property to access the tank’s value (such as its level, volume, or contents) or to assign a new value to it.

Arguments

value?string | number

The value to be set. If no parameter is passed, returns the displayed value of the tank.

Returnsstring

Invoke the val method.

const tank = document.querySelector('smart-tank');
const result = tank.val("10");

CSS Variables

--smart-tank-default-widthvar()

Default value

"var(--smart-editor-width)"

smartTank default width

--smart-tank-default-heightvar()

Default value

"calc(10 * var(--smart-editor-height))"

smartTank default height

--smart-tank-scale-sizevar()

Default value

"105px"

smartTank scale size

--smart-tank-thumb-widthvar()

Default value

"25px"

smartTank thumb width

--smart-tank-thumb-heightvar()

Default value

"var(--smart-tank-thumb-width)"

smartTank thumb height

Default value

"80px"

smartTank tooltip width

Default value

"30px"

smartTank thumb height

--smart-tank-tick-sizevar()

Default value

"10px"

smartTank tick size. Horizontal Tank tick height = Vertical Tank tick width.

--smart-tank-minor-tick-sizevar()

Default value

"5px"

smartTank minor tick size.

--smart-tank-minimum-track-sizevar()

Default value

"6px"

smartTank horizontal track min-height, vertical track min-width

Tank Javascript API

animation"none" | "simple" | "advanced"

Default value

Example

coerceboolean

Default value

Example

customIntervalboolean

Default value

Example

customTicksnumber[]

Example

dateLabelFormatStringstring

Default value

Example

decimalSeparatorstring

Default value

Example

disabledboolean

Default value

Example

intervalstring | number

Default value

Example

invertedboolean

Default value

Example

labelFormatFunctionfunction | null

Example

labelsVisibility"all" | "endPoints" | "none"

Default value

Example

unlockKeystring

Default value

Example

localestring

Default value

Example

localizeFormatFunctionfunction | null

Example

logarithmicScaleboolean

Default value

Example

maxstring | number

Default value

Example

mechanicalAction"switchUntilReleased" | "switchWhenReleased" | "switchWhileDragging"

Default value

Example

messagesobject

Default value

Example

minstring | number

Default value

Example

mode"numeric" | "date"

Default value

Example

namestring

Default value

Example

orientation"horizontal" | "vertical"

Default value

Example

precisionDigitsnumber

Example

readonlyboolean

Default value

Example