Tank — Smart UI JavaScript API

Tank — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Tank - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-tank id="demo-tank"></smart-tank>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.tank.js';

    const el = document.getElementById('demo-tank');
    if (el) {

      el.min = 0;
      el.max = 100;
      el.value = 22;
      el.interval = 10;
      el.scalePosition = 'near';

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: Tank   Framework: JavaScript   Selector: smart-tank

API counts: 42 properties, 3 methods, 1 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: focus(), getOptimalSize(), val()

Common events: change

Module hint: smart-webcomponents/source/modules/smart.tank.js

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

Class

Tank

Tank

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

Selector

smart-tank

Quick picks

changedisabledfocusvalue

Properties

AanimationControls 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.
CcoerceWhen 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.
CcustomIntervalControls 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.
CcustomTicksIf 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. Click for more details. Property object's options:
    DdateLabelFormatStringSpecifies 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").
    DdecimalSeparatorSpecifies 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).
    DdisabledDetermines 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.
    IintervalWhen 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.
    IinvertedDefines the orientation of the tank. When set to true, the positions of the tank's front and rear are swapped, effectively reversing its direction.
    LlabelFormatFunctionA 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.
    LlabelsVisibilityControls 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.
    LlocaleSpecifies 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.
    LlocalizeFormatFunctionCallback 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.
    LlogarithmicScaleDetermines 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.
    MmaxGets or sets the maximum allowable value for the widget, defining the upper limit that users can select or enter.
    MmechanicalActionDefines 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.
    MmessagesDefines 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.
    MminDefines 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.
    MmodeDetermines 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.
    NnameDefines 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.
    OorientationSpecifies the layout direction of the widget, determining whether its content is arranged horizontally, vertically, or in another supported orientation.
    PprecisionDigitsSpecifies the number of digits to display after the decimal point in numeric values. This setting is only applicable when scaleType is set to 'integer'.
    RreadonlyIf 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.
    RrightToLeftGets 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.
    SscalePositionSpecifies 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).
    SscaleTypeSpecifies 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.
    SscientificNotationDetermines 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.
    SshowThumbLabelControls 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.
    SshowTooltipControls whether the tooltip is visible to the user. When enabled, the tooltip will be displayed; when disabled, the tooltip will be hidden.
    SshowUnitControls 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.
    SsignificantDigitsCalculates 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.
    TthemeSets 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.
    TthumbLabelPositionSets 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.
    TticksPositionDefines 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.
    TticksVisibilityControls 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.
    TtooltipPositionSpecifies 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.
    UunfocusableDetermines 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.
    UunitSpecifies 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.
    UunlockKeyRetrieves or assigns the unlockKey property, which serves as a security token or code required to activate and access the product's full functionality.
    VvalidationEnhances 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.
    VvalueGets 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.
    WwordLengthSpecifies 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.

    Events

    CchangeThis 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.

    Methods

    FfocusLocks 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.
    GgetOptimalSizeRetrieves the recommended dimensions (width and height) for the widget based on its content and layout constraints, ensuring optimal display and usability.
    VvalRetrieves 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.

    Properties

    animationControls 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."none" | "simple" | "advanced"

    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"

    Examples

    Markup and runtime examples for animation:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

    const el = document.querySelector('smart-tank');
el.animation = "simple";

    Read the current value:

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

    coerceWhen 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.boolean

    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
    Try a demo showcasing the coerce property.

    Examples

    Markup and runtime examples for coerce:

    HTML attribute:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

    customIntervalControls 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.boolean

    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
    Try a demo showcasing the customInterval property.

    Examples

    Markup and runtime examples for customInterval:

    HTML attribute:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

    customTicksIf 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. Click for more details. Property object's options:
      number[]

      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.

      Examples

      Markup and runtime examples for customTicks:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-tank');
el.customTicks = [1, 3, 5, 8];

      Read the current value:

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

      dateLabelFormatStringSpecifies 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").string

      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"

      Examples

      Markup and runtime examples for dateLabelFormatString:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-tank');
el.dateLabelFormatString = "FP";

      Read the current value:

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

      decimalSeparatorSpecifies 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).string

      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

      "".""

      Examples

      Markup and runtime examples for decimalSeparator:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      disabledDetermines 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.boolean

      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

      Examples

      Markup and runtime examples for disabled:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      intervalWhen 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.string | 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

      1
      Try a demo showcasing the interval property.

      Examples

      Markup and runtime examples for interval:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

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

      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

      Examples

      Markup and runtime examples for inverted:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      labelFormatFunctionA 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.function | 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.

      Try a demo showcasing the labelFormatFunction property.

      Examples

      Markup and runtime examples for labelFormatFunction:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-tank');
el.labelFormatFunction = "function (value) { return value + '$'; }";

      Read the current value:

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

      labelsVisibilityControls 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."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"
      Try a demo showcasing the labelsVisibility property.

      Examples

      Markup and runtime examples for labelsVisibility:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-tank');
el.labelsVisibility = "none";

      Read the current value:

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

      localeSpecifies 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.string

      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"

      Examples

      Markup and runtime examples for locale:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-tank');
el.locale = "fr";

      Read the current value:

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

      localizeFormatFunctionCallback 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.function | 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.

      Examples

      Markup and runtime examples for localizeFormatFunction:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-tank');
el.localizeFormatFunction = "function(){return '...'}";

      Read the current value:

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

      logarithmicScaleDetermines 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.boolean

      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

      Examples

      Markup and runtime examples for logarithmicScale:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      maxGets or sets the maximum allowable value for the widget, defining the upper limit that users can select or enter.string | number

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

      Default value

      100
      Try a demo showcasing the max property.

      Examples

      Markup and runtime examples for max:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      mechanicalActionDefines 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."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"
      Try a demo showcasing the mechanicalAction property.

      Examples

      Markup and runtime examples for mechanicalAction:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-tank');
el.mechanicalAction = "switchUntilReleased";

      Read the current value:

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

      messagesDefines 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.object

      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."

      }

      Examples

      Markup and runtime examples for messages:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-tank');
el.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."}};

      Read the current value:

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

      minDefines 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.string | 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

      0
      Try a demo showcasing the min property.

      Examples

      Markup and runtime examples for min:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      modeDetermines 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."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"
      Try a demo showcasing the mode property.

      Examples

      Markup and runtime examples for mode:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-tank');
el.mode = "numeric";

      Read the current value:

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

      nameDefines 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.string

      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

      ""
      Try a demo showcasing the name property.

      Examples

      Markup and runtime examples for name:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-tank');
el.name = "tank2";

      Read the current value:

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

      orientationSpecifies the layout direction of the widget, determining whether its content is arranged horizontally, vertically, or in another supported 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"
      Try a demo showcasing the orientation property.

      Examples

      Markup and runtime examples for orientation:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-tank');
el.orientation = "horizontal";

      Read the current value:

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

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

      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'.

      Examples

      Markup and runtime examples for precisionDigits:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      readonlyIf 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.boolean

      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

      Examples

      Markup and runtime examples for readonly:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      rightToLeftGets 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.boolean

      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.

      Examples

      Markup and runtime examples for rightToLeft:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      scalePositionSpecifies 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)."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"
      Try a demo showcasing the scalePosition property.

      Examples

      Markup and runtime examples for scalePosition:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-tank');
el.scalePosition = "both";

      Read the current value:

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

      scaleTypeSpecifies 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."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"

      Examples

      Markup and runtime examples for scaleType:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-tank');
el.scaleType = "floatingPoint";

      Read the current value:

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

      scientificNotationDetermines 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.boolean

      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

      Examples

      Markup and runtime examples for scientificNotation:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      showThumbLabelControls 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.boolean

      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

      Examples

      Markup and runtime examples for showThumbLabel:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

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

      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
      Try a demo showcasing the showTooltip property.

      Examples

      Markup and runtime examples for showTooltip:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      showUnitControls 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.boolean

      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
      Try a demo showcasing the showUnit property.

      Examples

      Markup and runtime examples for showUnit:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      significantDigitsCalculates 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.number

      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

      0

      Examples

      Markup and runtime examples for significantDigits:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      themeSets 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.string

      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

      ""

      Examples

      Markup and runtime examples for theme:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-tank');
el.theme = "material-purple";

      Read the current value:

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

      thumbLabelPositionSets 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."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"

      Examples

      Markup and runtime examples for thumbLabelPosition:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-tank');
el.thumbLabelPosition = "near";

      Read the current value:

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

      ticksPositionDefines 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."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"

      Examples

      Markup and runtime examples for ticksPosition:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-tank');
el.ticksPosition = "scale";

      Read the current value:

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

      ticksVisibilityControls 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."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"
      Try a demo showcasing the ticksVisibility property.

      Examples

      Markup and runtime examples for ticksVisibility:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-tank');
el.ticksVisibility = "none";

      Read the current value:

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

      tooltipPositionSpecifies 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."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"
      Try a demo showcasing the tooltipPosition property.

      Examples

      Markup and runtime examples for tooltipPosition:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-tank');
el.tooltipPosition = "near";

      Read the current value:

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

      unfocusableDetermines 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.boolean

      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

      Examples

      Markup and runtime examples for unfocusable:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      unitSpecifies 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.string

      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"
      Try a demo showcasing the unit property.

      Examples

      Markup and runtime examples for unit:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-tank');
el.unit = "cm";

      Read the current value:

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

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

      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

      ""

      Examples

      Markup and runtime examples for unlockKey:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-tank');
el.unlockKey = "1111-2222-3333-4444-5555";

      Read the current value:

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

      validationEnhances 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."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"

      Examples

      Markup and runtime examples for validation:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-tank');
el.validation = "right";

      Read the current value:

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

      valueGets 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.any

      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

      0
      Try a demo showcasing the value property.

      Examples

      Markup and runtime examples for value:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      wordLengthSpecifies 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."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"

      Examples

      Markup and runtime examples for wordLength:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

      const el = document.querySelector('smart-tank');
el.wordLength = "int16";

      Read the current value:

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

      Events

      changeThis 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.CustomEvent

      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.

      Try a demo showcasing the change event.

      Examples

      Listen for change using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

      Methods

      focus(): voidLocks 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.

      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.

      On the custom element in the DOM (narrow the selector, e.g. to #my-tank, if you host multiple widgets):

      document.querySelector('smart-tank')?.focus();

      Try a demo showcasing the focus method.

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

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

      Returnsobject

      On the custom element in the DOM (narrow the selector, e.g. to #my-tank, if you host multiple widgets):

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

      Try a demo showcasing the getOptimalSize method.

      val( value?: string | number): stringRetrieves 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.

      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

      On the custom element in the DOM (narrow the selector, e.g. to #my-tank, if you host multiple widgets):

      const result = document.querySelector('smart-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