CcustomIntervalSets or gets whether custom ticks at (possibly) uneven interval will be plotted. The ticks to be plotted are defined with the property customTicks.

CcustomTicksIf customInterval is enabled, sets a list of ticks to be plotted. If coerce is set to true, the value will snap to these ticks.Click for more details. Property object's options:

DdateLabelFormatStringSets or gets the pattern which labels are displayed in when mode is 'date'.

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

DdisabledEnables or disables the widget.

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

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

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

LlabelsVisibilitySets or gets the widget's label visibility

LlocaleSets or gets the locale. Used in conjunction with the property messages.

LlocalizeFormatFunctionCallback, related to localization module.

LlogarithmicScaleEnables or disables the usage of logarithmic scale in the widget.

MmaxSets or gets the maximum value of the widget.

MmechanicalActionSets or gets the type of used mechanical action.

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

MminSets or gets the minimum value of the widget.

MmodeSets or gets whether the widget works with numbers or dates.

NnameSets or gets the element's name, which is used as a reference when the data is submitted.

OorientationSets the orientation of the widget

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

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

RrightToLeftSets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

SscalePositionSets the position of the widget's scales.

SscaleTypeSets the type of the tank's scale.

SscientificNotationEnables or disables scientific notation.

SshowThumbLabelEnables or disables displaying of the thumb label.

SshowTooltipEnables or disables displaying of the tooltip.

SshowUnitEnables or disables displaying of the units.

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

TthemeSets or gets the element's visual theme.

TthumbLabelPositionSets or gets the position of the thumb label.

TticksPositionSets or gets the position of the ticks in smartTank widget.

TticksVisibilitySets or gets the visibility of the ticks.

TtooltipPositionSets or gets the position of the tooltip in smartTank widget.

UunfocusableSets or gets if the element can be focused.

UunitSets or gets the name of unit used in smartTank widget.

VvalidationSets the value's validation by min/max. If 'strict' is applied, the value is always validated by min and max. If 'interaction' is applied, programmatic value changes are not coerced to min/max and if min/max are changed, resulting in the current value being out of range, the value is not coerced, and no change event is fired.

VvalueSets or gets the value of the smartTank widget.

WwordLengthSets or gets the word length. Applicable only when scaleType is 'integer'.

Events

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

Methods

FfocusFocuses the tank.

GgetOptimalSizeGets the optimal size of the widget.

VvalGet/set the value of the tank.

Properties

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

Sets or gets the animation mode. Animation is disabled when the property is set to'none'

Allowed Values

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

Default value

"advanced"

Example

Set theanimation property.

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

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

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

 tank.animation = 'simple';

Get theanimation property.

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

 let animation = tank.animation;

coerceboolean

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

Default value

false

Example

Set thecoerce property.

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

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

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

 tank.coerce = false;

Get thecoerce property.

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

 let coerce = tank.coerce;

customIntervalboolean

Sets or gets whether custom ticks at (possibly) uneven interval will be plotted. The ticks to be plotted are defined with the propertycustomTicks.

Default value

false

Example

Set thecustomInterval property.

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

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

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

 tank.customInterval = false;

Get thecustomInterval property.

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

 let customInterval = tank.customInterval;

customTicksnumber[]

IfcustomInterval is enabled, sets a list of ticks to be plotted. Ifcoerce is set totrue, the value will snap to these ticks.

Example

Set thecustomTicks property.

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

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

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

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

Get thecustomTicks property.

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

 let customTicks = tank.customTicks;

dateLabelFormatStringstring

Sets or gets the pattern which labels are displayed in whenmode is'date'.

Default value

"d"

Example

Set thedateLabelFormatString property.

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

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

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

 tank.dateLabelFormatString = 'FP';

Get thedateLabelFormatString property.

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

 let dateLabelFormatString = tank.dateLabelFormatString;

decimalSeparatorstring

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

Default value

"".""

Example

Set thedecimalSeparator property.

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

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

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

 tank.decimalSeparator = '.';

Get thedecimalSeparator property.

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

 let decimalSeparator = tank.decimalSeparator;

disabledboolean

Enables or disables the widget.

Default value

false

Example

Set thedisabled property.

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

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

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

 tank.disabled = false;

Get thedisabled property.

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

 let disabled = tank.disabled;

intervalstring | number

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

Default value

Example

Set theinterval property.

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

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

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

 tank.interval = 10;

Get theinterval property.

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

 let interval = tank.interval;

invertedboolean

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

Default value

false

Example

Set theinverted property.

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

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

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

 tank.inverted = false;

Get theinverted property.

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

 let inverted = tank.inverted;

labelFormatFunctionfunction | null

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

Example

Set thelabelFormatFunction property.

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

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

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

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

Get thelabelFormatFunction property.

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

 let labelFormatFunction = tank.labelFormatFunction;

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

Sets or gets the widget's label visibility

Default value

"all"

Example

Set thelabelsVisibility property.

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

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

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

 tank.labelsVisibility = 'none';

Get thelabelsVisibility property.

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

 let labelsVisibility = tank.labelsVisibility;

localestring

Sets or gets the locale. Used in conjunction with the propertymessages.

Default value

"en"

Example

Set thelocale property.

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

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

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

 tank.locale = 'fr';

Get thelocale property.

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

 let locale = tank.locale;

localizeFormatFunctionfunction | null

Callback, related to localization module.

Example

Set thelocalizeFormatFunction property.

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

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

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

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

Get thelocalizeFormatFunction property.

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

 let localizeFormatFunction = tank.localizeFormatFunction;

logarithmicScaleboolean

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

Default value

false

Example

Set thelogarithmicScale property.

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

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

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

 tank.logarithmicScale = false;

Get thelogarithmicScale property.

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

 let logarithmicScale = tank.logarithmicScale;

maxstring | number

Sets or gets the maximum value of the widget.

Default value

100

Example

Set themax property.

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

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

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

 tank.max = 50;

Get themax property.

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

 let max = tank.max;

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

Sets or gets the type of used mechanical action.

Default value

"switchWhileDragging"

Example

Set themechanicalAction property.

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

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

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

 tank.mechanicalAction = 'switchUntilReleased';

Get themechanicalAction property.

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

 let mechanicalAction = tank.mechanicalAction;

messagesobject

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

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 themessages 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 themessages 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 themessages property.

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

 let messages = tank.messages;

minstring | number

Sets or gets the minimum value of the widget.

Default value

Example

Set themin property.

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

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

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

 tank.min = 50;

Get themin property.

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

 let min = tank.min;

mode"numeric" | "date"

Sets or gets whether the widget works with numbers or dates.

Default value

"numeric"

Example

Set themode property.

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

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

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

 tank.mode = 'numeric';

Get themode property.

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

 let mode = tank.mode;

namestring

Sets or gets the element's name, which is used as a reference when the data is submitted.

Default value

Example

Set thename property.

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

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

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

 tank.name = 'tank2';

Get thename property.

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

 let name = tank.name;

orientation"horizontal" | "vertical"

Sets the orientation of the widget

Default value

"vertical"

Example

Set theorientation property.

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

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

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

 tank.orientation = 'horizontal';

Get theorientation property.

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

 let orientation = tank.orientation;

precisionDigitsnumber

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

Example

Set theprecisionDigits property.

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

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

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

 tank.precisionDigits = 6;

Get theprecisionDigits property.

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

 let precisionDigits = tank.precisionDigits;

readonlyboolean

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

Default value

false

Example

Set thereadonly property.

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

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

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

 tank.readonly = true;

Get thereadonly property.

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

 let readonly = tank.readonly;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false

Try a demo showcasing therightToLeft property.

Example

Set therightToLeft property.

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

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

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

 tank.rightToLeft = true;

Get therightToLeft property.

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

 let rightToLeft = tank.rightToLeft;

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

Sets the position of the widget's scales.

Default value

"near"

Example

Set thescalePosition property.

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

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

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

 tank.scalePosition = 'both';

Get thescalePosition property.

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

 let scalePosition = tank.scalePosition;

scaleType"floatingPoint" | "integer"

Sets the type of the tank's scale.

Default value

"floatingPoint"

Example

Set thescaleType property.

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

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

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

 tank.scaleType = 'floatingPoint';

Get thescaleType property.

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

 let scaleType = tank.scaleType;

scientificNotationboolean

Enables or disables scientific notation.

Default value

false

Example

Set thescientificNotation property.

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

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

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

 tank.scientificNotation = true;

Get thescientificNotation property.

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

 let scientificNotation = tank.scientificNotation;

showThumbLabelboolean

Enables or disables displaying of the thumb label.

Default value

false

Example

Set theshowThumbLabel property.

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

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

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

 tank.showThumbLabel = true;

Get theshowThumbLabel property.

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

 let showThumbLabel = tank.showThumbLabel;

showTooltipboolean

Enables or disables displaying of the tooltip.

Default value

false

Example

Set theshowTooltip property.

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

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

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

 tank.showTooltip = true;

Get theshowTooltip property.

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

 let showTooltip = tank.showTooltip;

showUnitboolean

Enables or disables displaying of the units.

Default value

false

Example

Set theshowUnit property.

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

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

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

 tank.showUnit = false;

Get theshowUnit property.

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

 let showUnit = tank.showUnit;

significantDigitsnumber

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

Default value

Example

Set thesignificantDigits property.

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

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

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

 tank.significantDigits = 2;

Get thesignificantDigits property.

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

 let significantDigits = tank.significantDigits;

themestring

Sets or gets the element's visual theme.

Default value

Example

Set thetheme property.

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

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

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

 tank.theme = 'material-purple';

Get thetheme property.

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

 let theme = tank.theme;

thumbLabelPosition"near" | "far"

Sets or gets the position of the thumb label.

Default value

"near"

Example

Set thethumbLabelPosition property.

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

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

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

 tank.thumbLabelPosition = 'near';

Get thethumbLabelPosition property.

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

 let thumbLabelPosition = tank.thumbLabelPosition;

ticksPosition"scale" | "track"

Sets or gets the position of the ticks in smartTank widget.

Default value

"scale"

Example

Set theticksPosition property.

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

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

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

 tank.ticksPosition = 'scale';

Get theticksPosition property.

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

 let ticksPosition = tank.ticksPosition;

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

Sets or gets the visibility of the ticks.

Default value

"minor"

Example

Set theticksVisibility property.

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

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

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

 tank.ticksVisibility = 'none';

Get theticksVisibility property.

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

 let ticksVisibility = tank.ticksVisibility;

tooltipPosition"near" | "far"

Sets or gets the position of the tooltip in smartTank widget.

Default value

"near"

Example

Set thetooltipPosition property.

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

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

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

 tank.tooltipPosition = 'near';

Get thetooltipPosition property.

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

 let tooltipPosition = tank.tooltipPosition;

unfocusableboolean

Sets or gets if the element can be focused.

Default value

false

Example

Set theunfocusable property.

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

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

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

 tank.unfocusable = false;

Get theunfocusable property.

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

 let unfocusable = tank.unfocusable;

unitstring

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

Default value

"kg"

Example

Set theunit property.

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

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

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

 tank.unit = 'cm';

Get theunit property.

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

 let unit = tank.unit;

validation"strict" | "interaction"

Sets the value's validation by min/max. If'strict' is applied, the value is always validated by min and max. If'interaction' is applied, programmatic value changes are not coerced to min/max and if min/max are changed, resulting in the current value being out of range, the value is not coerced, and nochange event is fired.

Default value

"strict"

Example

Set thevalidation property.

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

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

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

 tank.validation = 'right';

Get thevalidation property.

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

 let validation = tank.validation;

valueany

Sets or gets the value of the smartTank widget.

Default value

Example

Set thevalue property.

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

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

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

 tank.value = 100;

Get thevalue property.

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

 let value = tank.value;

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

Sets or gets the word length. Applicable only whenscaleType is'integer'.

Default value

"int32"

Example

Set thewordLength property.

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

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

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

 tank.wordLength = 'int16';

Get thewordLength property.

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

 let wordLength = tank.wordLength;

Events

changeCustomEvent

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

BubblesYes
CancelableNo
InterfaceCustomEvent
Event handler propertyonChange

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returnstrue if the event was preventedby any of its subscribers.

Returns

booleantrue if the default action was prevented.Otherwise, returnsfalse.

preventDefault

The preventDefault() method prevents the default action for a specified event.In this way, the source component suppressesthe 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 ofchange event.

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

Methods

focus(): void

Focuses the tank.

Invoke thefocus method.

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

getOptimalSize(): object

Gets the optimal size of the widget.

Returnsobject

Invoke thegetOptimalSize method.

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

val(value?: string | number): string

Get/set the value of the tank.

Arguments

value?string | number

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

Returnsstring

Invoke theval 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

--smart-tank-tooltip-widthvar()

Default value

"80px"

smartTank tooltip width

--smart-tank-tooltip-heightvar()

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

[8]ページ先頭

Movatterモバイル変換

Complex Components

Core Components

Overview

Framework and Utilities

Accessibility

Theme Builder

Angular

React

Vue

Blazor

Integrations

Accordion

Badge

Button

Breadcrumb

Calendar

Card

CardView

Carousel

Chart

CheckBox

ComboBox

ColorPicker

Docking Layout

DateTimePicker

Editor

FileUpload

DropDownList

DropDownButton

Gauge

Grid

Gantt

Form

Input

LED

Kanban

ListBox

ListMenu

Layout

MaskedTextBox

Menu

MultiSplitButton

MultilineTextBox

NumericTextBox

PivotTable

Pager

PasswordTextBox

PowerButton

ProgressBar

QueryBuilder

RadioButton

RepeatButton

Rating

Ribbon

Barcode

QRcode

Scheduler

ScrollBar

Slider

Splitter

Sortable

SwitchButton

Table

Tabs

Tank

TextBox

TimePicker

Toast

ToggleButton

Tooltip

Tree

Window

Tank Javascript API

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

Default value

Example

coerceboolean

Default value

Example