Slider — Smart UI JavaScript API

Slider — 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>Slider - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-slider id="demo-slider"></smart-slider>

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

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

      el.min = 0;
      el.max = 100;
      el.value = 30;
      el.scalePosition = 'none';
      el.tooltip = true;

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

Developer Quick Reference

Component: Slider   Framework: JavaScript   Selector: smart-slider

API counts: 46 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.slider.js

Sliders allow users to make selections from a range of values.

Class

Slider

Slider

Sliders allow users to make selections from a range of values.

Selector

smart-slider

Quick picks

changedisabledfocusvalue

Properties

AanimationSets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Use other valid values to enable and control different animation behaviors.
CcoerceWhen the coerce property is set to true and the user clicks on the track, the slider thumb and its value will automatically snap to the nearest valid position based on the interval property. This ensures that the selected value always aligns with the allowed increments defined by interval.
CcustomIntervalControls whether to display custom ticks on the axis, even if they are placed at uneven intervals. The specific positions of these custom ticks are defined by the customTicks property. Use this option to enable or disable the rendering of user-defined tick marks instead of automatically generated ones.
CcustomTicksWhen customInterval is enabled, you can define a specific list of tick values to be displayed on the plot axis. If coerce is set to true, any input value will automatically adjust (or "snap") to the nearest specified tick value from this list, ensuring that only those defined tick marks are selected or displayed. Click for more details. Property object's options:
    DdateLabelFormatStringSets or retrieves the format pattern used to display labels when the mode property is set to 'date'. This pattern determines how dates will appear in the labels, such as the order of day, month, and year, as well as the specific separators or formatting conventions applied.
    DdecimalSeparatorSpecifies or retrieves the character used as the decimal separator in numeric values. This determines which symbol (such as a period "." or a comma ",") separates the integer part from the fractional part of a number when displaying or parsing numeric data.
    DdisabledDetermines whether the widget is active and available for user interaction. When enabled, the widget is fully functional; when disabled, it becomes inactive and unresponsive to user input.
    EenableMouseWheelActionControls whether users can change the smartSlider value by scrolling the mouse wheel. When enabled, scrolling the wheel while hovering over the slider will increment or decrement its value. Disabling this option prevents value changes via the mouse wheel interaction.
    IintervalSpecifies the set of predefined values or intervals that the slider's thumb will automatically align or "snap" to when moved by the user, ensuring precise selection and preventing arbitrary positioning.
    IinvertedDetermines the orientation of the slider. When set to true, the positions of the slider’s start and end points are reversed, effectively flipping the slider’s direction from its default state. This can be useful for right-to-left layouts or custom UI requirements.
    LlabelFormatFunctionA callback function that receives the slider’s current value as an argument and returns a formatted string, which will be displayed on the slider’s labels and tooltip. This allows you to customize how the slider values appear to users, such as adding units, controlling decimal precision, or applying localization.
    LlabelsVisibilityControls the visibility of the widget's label by allowing you to set or retrieve its current state (visible or hidden). Use this property to show or hide the label as needed.
    LlocaleSpecifies or retrieves the current locale setting, which determines the language and regional formatting used by the component. This property works in conjunction with the messages property to provide localized content, ensuring that labels, messages, and other text elements are displayed according to the selected locale.
    LlocalizeFormatFunctionCallback function associated with the localization module, typically used to handle language changes, update localized content, or respond to localization-related events within the application.
    LlogarithmicScaleDetermines whether the widget displays data using a logarithmic scale or a linear scale. When enabled, values on the widget are plotted using a logarithmic scale, which is useful for visualizing data that spans several orders of magnitude. When disabled, a standard linear scale is used.
    MmaxSpecifies or retrieves the maximum allowable value that the widget can accept. This property defines the upper limit for user input or the widget’s range, ensuring that values entered or selected cannot exceed this maximum threshold.
    MmechanicalActionSpecifies or retrieves the type of mechanical action being applied. This property determines the operational behavior or interaction mode of the mechanism (e.g., momentary, toggle, or latching). Use this to configure how the mechanism responds to user input or system events.
    MmessagesDefines or retrieves an object containing the strings used within the widget that can be localized (translated into different languages). This property works together with the locale setting to display the widget's text elements in the appropriate language for the user. Use this property to customize or override default text labels based on the selected locale.
    MminDefines or retrieves the widget’s minimum allowed value. This property determines the lowest value a user can input or select within the widget. Setting this value restricts input to be no less than the specified minimum.
    MmodeSpecifies whether the widget is configured to handle numerical values or date values. When set, this determines if the widget processes input and displays output as numbers or as dates. When retrieved, it indicates the current mode—number or date—in which the widget is operating.
    NnameSets or retrieves the element's name attribute, which serves as a key to identify the element's value when a form is submitted. This name is used to reference the data in the server-side processing, ensuring that the submitted value can be correctly associated with this specific element.
    OorientationSpecifies the layout direction of the widget, determining whether its content is arranged horizontally, vertically, or in another defined orientation. This property affects how child elements are displayed within the widget.
    PprecisionDigitsSpecifies how many digits should be displayed after the decimal point in numeric values. This setting is only effective when the scaleType property is set to 'integer'; it has no effect for other scale types.
    RrangeSliderEnables or disables the slider's range mode. When set to true, the slider displays two thumbs, allowing users to select a value range between a minimum and maximum. If set to false, only a single thumb is shown for selecting one value.
    RreadonlyWhen the slider is set to read-only, users cannot interact with it; this means they are unable to drag the slider thumb or click on the track (including the filled portion) to change its value. The slider's current value remains visible, but it cannot be modified through user input.
    RrightToLeftSpecifies or retrieves a value that determines whether the element’s content alignment supports right-to-left text direction, typically used for languages such as Arabic or Hebrew. This setting ensures the element renders content in accordance with right-to-left locale conventions.
    SscalePositionSpecifies the alignment or placement of the widget's scale indicators (such as axes, ticks, or labels) relative to the widget, determining where and how the scales appear within the widget's layout.
    SscaleTypeDefines the style of the slider's scale, such as linear or logarithmic, which determines how values are distributed along the slider track.
    SscientificNotationSpecifies whether numerical values should be displayed in scientific notation (e.g., 1.23e+4) instead of standard decimal notation. Set to true to enable scientific notation, or false to display numbers in regular decimal format.
    SshowButtonsControls whether the buttons are visible or hidden. When enabled, the buttons will be displayed in the user interface; when disabled, the buttons will be hidden from view.
    SshowThumbLabelControls whether the thumb label is visible or hidden. When enabled, the thumb label will be displayed; when disabled, it will be hidden. This option allows you to show or hide the label that appears above the slider's thumb to indicate its current value.
    SshowTooltipControls whether the tooltip is visible. When enabled, the tooltip will be displayed; when disabled, the tooltip will be hidden.
    SshowUnitControls whether units (such as px, %, em, etc.) are visible alongside values. When enabled, the units are displayed; when disabled, values are shown without their corresponding units.
    SsignificantDigitsIdentifies the number of significant digits present in a given number. This option is applicable only when the scaleType property is set to 'integer', ensuring that the operation is performed exclusively on integer values.
    TthemeSpecifies or retrieves the visual theme applied to the element, determining its overall appearance—such as colors, fonts, and styles—according to the selected theme configuration.
    TthumbLabelPositionSets or retrieves the current position of the thumb label on the slider control, indicating the value selected by the user. This property allows you to programmatically update the thumb label’s position or access its current location to reflect user interactions.
    TticksPositionDetermines or retrieves the placement of tick marks on the smartSlider widget. This property allows you to specify where the ticks appear on the slider—such as at the top, bottom, left, or right—enhancing user interaction and slider orientation.
    TticksVisibilityControls whether the ticks are visible or hidden. When set, this property determines if tick marks on the component are displayed; when retrieved, it indicates the current visibility status of the ticks.
    TtooltipPositionSpecifies or retrieves the position of the tooltip displayed on the smartSlider widget. This property determines where the tooltip appears relative to the slider handle, such as above, below, left, or right of the handle. Use this option to customize the tooltip placement to enhance user experience.
    UunfocusableDetermines whether the element is focusable by the user (e.g., via keyboard navigation) or retrieves the current focusable state of the element. If set to true, the element can receive focus; if false, it cannot.
    UunitSpecifies or retrieves the unit label displayed on the smartSlider widget, indicating the measurement or value type (such as 'px', '%', 'kg', etc.) associated with the slider's current position. This property allows you to define or access the text shown next to the slider value.
    UunlockKeyDefines or retrieves the unlockKey, a unique value used to authorize and enable access to the product’s features.
    VvalidationConfigures how the value is validated against the specified minimum and maximum limits. - When set to 'strict', all value assignments—whether made by user interaction or programmatically—are automatically validated and coerced to remain within the min and max bounds. - When set to 'interaction', only values entered or changed by user interaction are validated and coerced to the min and max limits. Programmatic value changes are not automatically adjusted, and if the min or max is updated such that the current value falls outside the new range, the value remains unchanged. In this mode, no change event is triggered when values remain out of bounds following these updates.
    VvalueSets or retrieves the current value of the smartSlider widget. This property is applicable only when the rangeSlider option is set to false, meaning the slider operates in single-value mode rather than as a range selector. When you use this property, you can either specify a new value for the slider or obtain the current value the slider is set to.
    VvaluesGets or sets the current value of the smartSlider widget. When the rangeSlider property is set to true, this property manages the values for both slider handles, typically as an array representing the selected range. For a single-value slider, it represents the selected value. Use this property to programmatically retrieve or update the slider's value(s).
    WwordLengthSets or retrieves the word length value, which determines the number of bits used to represent each integer value. This property is only relevant when scaleType is set to 'integer'. If scaleType has any other value, this property is ignored.

    Events

    CchangeThis event is triggered each time the user changes the value of the slider, either by dragging the handle or through keyboard input. It allows you to respond programmatically whenever the slider’s value is updated, such as by updating a display label or synchronizing the value with other form elements.

    Methods

    FfocusSets the keyboard focus to the slider element, enabling users to interact with the slider using keyboard controls such as arrow keys, page up/down, and home/end. This facilitates accessibility and allows improved navigation for users relying on keyboard input.
    GgetOptimalSizeRetrieves the most suitable width and height dimensions for the widget based on its content, layout constraints, and current configuration. Use this method to determine the preferred size the widget should be rendered to ensure optimal display and usability.
    VvalRetrieves or assigns the current value of the slider component. When used as a getter, it returns the slider’s present value. When used as a setter, it updates the slider to the specified value and triggers any associated change events or callbacks.

    Properties

    animationSets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Use other valid values to enable and control different animation behaviors."none" | "simple" | "advanced"

    Sets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Use other valid values to enable and control different animation behaviors.

    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-slider animation="none"></smart-slider>

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

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

    Read the current value:

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

    coerceWhen the coerce property is set to true and the user clicks on the track, the slider thumb and its value will automatically snap to the nearest valid position based on the interval property. This ensures that the selected value always aligns with the allowed increments defined by interval.boolean

    When the coerce property is set to true and the user clicks on the track, the slider thumb and its value will automatically snap to the nearest valid position based on the interval property. This ensures that the selected value always aligns with the allowed increments defined by interval.

    Default value

    false
    Try a demo showcasing the coerce property.

    Examples

    Markup and runtime examples for coerce:

    HTML attribute:

    <smart-slider coerce></smart-slider>

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

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

    Read the current value:

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

    customIntervalControls whether to display custom ticks on the axis, even if they are placed at uneven intervals. The specific positions of these custom ticks are defined by the customTicks property. Use this option to enable or disable the rendering of user-defined tick marks instead of automatically generated ones.boolean

    Controls whether to display custom ticks on the axis, even if they are placed at uneven intervals. The specific positions of these custom ticks are defined by the customTicks property. Use this option to enable or disable the rendering of user-defined tick marks instead of automatically generated ones.

    Default value

    false
    Try a demo showcasing the customInterval property.

    Examples

    Markup and runtime examples for customInterval:

    HTML attribute:

    <smart-slider custom-interval></smart-slider>

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

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

    Read the current value:

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

    customTicksWhen customInterval is enabled, you can define a specific list of tick values to be displayed on the plot axis. If coerce is set to true, any input value will automatically adjust (or "snap") to the nearest specified tick value from this list, ensuring that only those defined tick marks are selected or displayed. Click for more details. Property object's options:
      number[]

      When customInterval is enabled, you can define a specific list of tick values to be displayed on the plot axis. If coerce is set to true, any input value will automatically adjust (or "snap") to the nearest specified tick value from this list, ensuring that only those defined tick marks are selected or displayed.

      Try a demo showcasing the customTicks property.

      Examples

      Markup and runtime examples for customTicks:

      HTML:

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

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

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

      Read the current value:

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

      dateLabelFormatStringSets or retrieves the format pattern used to display labels when the mode property is set to 'date'. This pattern determines how dates will appear in the labels, such as the order of day, month, and year, as well as the specific separators or formatting conventions applied.string

      Sets or retrieves the format pattern used to display labels when the mode property is set to 'date'. This pattern determines how dates will appear in the labels, such as the order of day, month, and year, as well as the specific separators or formatting conventions applied.

      Default value

      "d"

      Examples

      Markup and runtime examples for dateLabelFormatString:

      HTML:

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

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

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

      Read the current value:

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

      decimalSeparatorSpecifies or retrieves the character used as the decimal separator in numeric values. This determines which symbol (such as a period "." or a comma ",") separates the integer part from the fractional part of a number when displaying or parsing numeric data.string

      Specifies or retrieves the character used as the decimal separator in numeric values. This determines which symbol (such as a period "." or a comma ",") separates the integer part from the fractional part of a number when displaying or parsing numeric data.

      Default value

      "".""

      Examples

      Markup and runtime examples for decimalSeparator:

      HTML:

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

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

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

      Read the current value:

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

      disabledDetermines whether the widget is active and available for user interaction. When enabled, the widget is fully functional; when disabled, it becomes inactive and unresponsive to user input.boolean

      Determines whether the widget is active and available for user interaction. When enabled, the widget is fully functional; when disabled, it becomes inactive and unresponsive to user input.

      Default value

      false
      Try a demo showcasing the disabled property.

      Examples

      Markup and runtime examples for disabled:

      HTML attribute:

      <smart-slider disabled></smart-slider>

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

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

      Read the current value:

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

      enableMouseWheelActionControls whether users can change the smartSlider value by scrolling the mouse wheel. When enabled, scrolling the wheel while hovering over the slider will increment or decrement its value. Disabling this option prevents value changes via the mouse wheel interaction.boolean

      Controls whether users can change the smartSlider value by scrolling the mouse wheel. When enabled, scrolling the wheel while hovering over the slider will increment or decrement its value. Disabling this option prevents value changes via the mouse wheel interaction.

      Default value

      false

      Examples

      Markup and runtime examples for enableMouseWheelAction:

      HTML attribute:

      <smart-slider enable-mouse-wheel-action></smart-slider>

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

      const el = document.querySelector('smart-slider');
el.enableMouseWheelAction = false;

      Read the current value:

      const el = document.querySelector('smart-slider');
const enableMouseWheelAction = el.enableMouseWheelAction;

      intervalSpecifies the set of predefined values or intervals that the slider's thumb will automatically align or "snap" to when moved by the user, ensuring precise selection and preventing arbitrary positioning.string | number

      Specifies the set of predefined values or intervals that the slider's thumb will automatically align or "snap" to when moved by the user, ensuring precise selection and preventing arbitrary positioning.

      Default value

      1
      Try a demo showcasing the interval property.

      Examples

      Markup and runtime examples for interval:

      HTML:

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

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

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

      Read the current value:

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

      invertedDetermines the orientation of the slider. When set to true, the positions of the slider’s start and end points are reversed, effectively flipping the slider’s direction from its default state. This can be useful for right-to-left layouts or custom UI requirements.boolean

      Determines the orientation of the slider. When set to true, the positions of the slider’s start and end points are reversed, effectively flipping the slider’s direction from its default state. This can be useful for right-to-left layouts or custom UI requirements.

      Default value

      false

      Examples

      Markup and runtime examples for inverted:

      HTML attribute:

      <smart-slider inverted></smart-slider>

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

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

      Read the current value:

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

      labelFormatFunctionA callback function that receives the slider’s current value as an argument and returns a formatted string, which will be displayed on the slider’s labels and tooltip. This allows you to customize how the slider values appear to users, such as adding units, controlling decimal precision, or applying localization.function | null

      A callback function that receives the slider’s current value as an argument and returns a formatted string, which will be displayed on the slider’s labels and tooltip. This allows you to customize how the slider values appear to users, such as adding units, controlling decimal precision, or applying localization.

      Try a demo showcasing the labelFormatFunction property.

      Examples

      Markup and runtime examples for labelFormatFunction:

      HTML:

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

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

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

      Read the current value:

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

      labelsVisibilityControls the visibility of the widget's label by allowing you to set or retrieve its current state (visible or hidden). Use this property to show or hide the label as needed."all" | "endPoints" | "none"

      Controls the visibility of the widget's label by allowing you to set or retrieve its current state (visible or hidden). Use this property to show or hide the label as needed.

      Default value

      "all"
      Try a demo showcasing the labelsVisibility property.

      Examples

      Markup and runtime examples for labelsVisibility:

      HTML:

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

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

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

      Read the current value:

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

      localeSpecifies or retrieves the current locale setting, which determines the language and regional formatting used by the component. This property works in conjunction with the messages property to provide localized content, ensuring that labels, messages, and other text elements are displayed according to the selected locale.string

      Specifies or retrieves the current locale setting, which determines the language and regional formatting used by the component. This property works in conjunction with the messages property to provide localized content, ensuring that labels, messages, and other text elements are displayed according to the selected locale.

      Default value

      "en"
      Try a demo showcasing the locale property.

      Examples

      Markup and runtime examples for locale:

      HTML:

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

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

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

      Read the current value:

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

      localizeFormatFunctionCallback function associated with the localization module, typically used to handle language changes, update localized content, or respond to localization-related events within the application.function | null

      Callback function associated with the localization module, typically used to handle language changes, update localized content, or respond to localization-related events within the application.

      Examples

      Markup and runtime examples for localizeFormatFunction:

      HTML:

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

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

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

      Read the current value:

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

      logarithmicScaleDetermines whether the widget displays data using a logarithmic scale or a linear scale. When enabled, values on the widget are plotted using a logarithmic scale, which is useful for visualizing data that spans several orders of magnitude. When disabled, a standard linear scale is used.boolean

      Determines whether the widget displays data using a logarithmic scale or a linear scale. When enabled, values on the widget are plotted using a logarithmic scale, which is useful for visualizing data that spans several orders of magnitude. When disabled, a standard linear scale is used.

      Default value

      false

      Examples

      Markup and runtime examples for logarithmicScale:

      HTML attribute:

      <smart-slider logarithmic-scale></smart-slider>

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

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

      Read the current value:

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

      maxSpecifies or retrieves the maximum allowable value that the widget can accept. This property defines the upper limit for user input or the widget’s range, ensuring that values entered or selected cannot exceed this maximum threshold.string | number

      Specifies or retrieves the maximum allowable value that the widget can accept. This property defines the upper limit for user input or the widget’s range, ensuring that values entered or selected cannot exceed this maximum threshold.

      Default value

      100
      Try a demo showcasing the max property.

      Examples

      Markup and runtime examples for max:

      HTML:

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

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

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

      Read the current value:

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

      mechanicalActionSpecifies or retrieves the type of mechanical action being applied. This property determines the operational behavior or interaction mode of the mechanism (e.g., momentary, toggle, or latching). Use this to configure how the mechanism responds to user input or system events."switchUntilReleased" | "switchWhenReleased" | "switchWhileDragging"

      Specifies or retrieves the type of mechanical action being applied. This property determines the operational behavior or interaction mode of the mechanism (e.g., momentary, toggle, or latching). Use this to configure how the mechanism responds to user input or system events.

      Default value

      "switchWhileDragging"
      Try a demo showcasing the mechanicalAction property.

      Examples

      Markup and runtime examples for mechanicalAction:

      HTML:

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

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

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

      Read the current value:

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

      messagesDefines or retrieves an object containing the strings used within the widget that can be localized (translated into different languages). This property works together with the locale setting to display the widget's text elements in the appropriate language for the user. Use this property to customize or override default text labels based on the selected locale.object

      Defines or retrieves an object containing the strings used within the widget that can be localized (translated into different languages). This property works together with the locale setting to display the widget's text elements in the appropriate language for the user. Use this property to customize or override default text labels based on the selected locale.

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

      }

      Try a demo showcasing the messages property.

      Examples

      Markup and runtime examples for messages:

      HTML:

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

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

      const el = document.querySelector('smart-slider');
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-slider');
const messages = el.messages;

      minDefines or retrieves the widget’s minimum allowed value. This property determines the lowest value a user can input or select within the widget. Setting this value restricts input to be no less than the specified minimum.string | number

      Defines or retrieves the widget’s minimum allowed value. This property determines the lowest value a user can input or select within the widget. Setting this value restricts input to be no less than the specified minimum.

      Default value

      0
      Try a demo showcasing the min property.

      Examples

      Markup and runtime examples for min:

      HTML:

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

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

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

      Read the current value:

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

      modeSpecifies whether the widget is configured to handle numerical values or date values. When set, this determines if the widget processes input and displays output as numbers or as dates. When retrieved, it indicates the current mode—number or date—in which the widget is operating."numeric" | "date"

      Specifies whether the widget is configured to handle numerical values or date values. When set, this determines if the widget processes input and displays output as numbers or as dates. When retrieved, it indicates the current mode—number or date—in which the widget is operating.

      Default value

      "numeric"
      Try a demo showcasing the mode property.

      Examples

      Markup and runtime examples for mode:

      HTML:

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

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

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

      Read the current value:

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

      nameSets or retrieves the element's name attribute, which serves as a key to identify the element's value when a form is submitted. This name is used to reference the data in the server-side processing, ensuring that the submitted value can be correctly associated with this specific element.string

      Sets or retrieves the element's name attribute, which serves as a key to identify the element's value when a form is submitted. This name is used to reference the data in the server-side processing, ensuring that the submitted value can be correctly associated with this specific element.

      Default value

      ""
      Try a demo showcasing the name property.

      Examples

      Markup and runtime examples for name:

      HTML:

      <smart-slider name="slider1"></smart-slider>

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

      const el = document.querySelector('smart-slider');
el.name = "slider2";

      Read the current value:

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

      orientationSpecifies the layout direction of the widget, determining whether its content is arranged horizontally, vertically, or in another defined orientation. This property affects how child elements are displayed within the widget."horizontal" | "vertical"

      Specifies the layout direction of the widget, determining whether its content is arranged horizontally, vertically, or in another defined orientation. This property affects how child elements are displayed within the widget.

      Default value

      "horizontal"
      Try a demo showcasing the orientation property.

      Examples

      Markup and runtime examples for orientation:

      HTML:

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

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

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

      Read the current value:

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

      precisionDigitsSpecifies how many digits should be displayed after the decimal point in numeric values. This setting is only effective when the scaleType property is set to 'integer'; it has no effect for other scale types.number

      Specifies how many digits should be displayed after the decimal point in numeric values. This setting is only effective when the scaleType property is set to 'integer'; it has no effect for other scale types.

      Examples

      Markup and runtime examples for precisionDigits:

      HTML:

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

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

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

      Read the current value:

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

      rangeSliderEnables or disables the slider's range mode. When set to true, the slider displays two thumbs, allowing users to select a value range between a minimum and maximum. If set to false, only a single thumb is shown for selecting one value.boolean

      Enables or disables the slider's range mode. When set to true, the slider displays two thumbs, allowing users to select a value range between a minimum and maximum. If set to false, only a single thumb is shown for selecting one value.

      Default value

      false
      Try a demo showcasing the rangeSlider property.

      Examples

      Markup and runtime examples for rangeSlider:

      HTML attribute:

      <smart-slider range-slider></smart-slider>

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

      const el = document.querySelector('smart-slider');
el.rangeSlider = false;

      Read the current value:

      const el = document.querySelector('smart-slider');
const rangeSlider = el.rangeSlider;

      readonlyWhen the slider is set to read-only, users cannot interact with it; this means they are unable to drag the slider thumb or click on the track (including the filled portion) to change its value. The slider's current value remains visible, but it cannot be modified through user input.boolean

      When the slider is set to read-only, users cannot interact with it; this means they are unable to drag the slider thumb or click on the track (including the filled portion) to change its value. The slider's current value remains visible, but it cannot be modified through user input.

      Default value

      false

      Examples

      Markup and runtime examples for readonly:

      HTML attribute:

      <smart-slider readonly></smart-slider>

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

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

      Read the current value:

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

      rightToLeftSpecifies or retrieves a value that determines whether the element’s content alignment supports right-to-left text direction, typically used for languages such as Arabic or Hebrew. This setting ensures the element renders content in accordance with right-to-left locale conventions.boolean

      Specifies or retrieves a value that determines whether the element’s content alignment supports right-to-left text direction, typically used for languages such as Arabic or Hebrew. This setting ensures the element renders content in accordance with right-to-left locale conventions.

      Default value

      false
      Try a demo showcasing the rightToLeft property.

      Examples

      Markup and runtime examples for rightToLeft:

      HTML attribute:

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

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

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

      Read the current value:

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

      scalePositionSpecifies the alignment or placement of the widget's scale indicators (such as axes, ticks, or labels) relative to the widget, determining where and how the scales appear within the widget's layout."near" | "far" | "both" | "none"

      Specifies the alignment or placement of the widget's scale indicators (such as axes, ticks, or labels) relative to the widget, determining where and how the scales appear within the widget's layout.

      Default value

      "near"

      Examples

      Markup and runtime examples for scalePosition:

      HTML:

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

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

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

      Read the current value:

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

      scaleTypeDefines the style of the slider's scale, such as linear or logarithmic, which determines how values are distributed along the slider track."floatingPoint" | "integer"

      Defines the style of the slider's scale, such as linear or logarithmic, which determines how values are distributed along the slider track.

      Default value

      "floatingPoint"

      Examples

      Markup and runtime examples for scaleType:

      HTML:

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

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

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

      Read the current value:

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

      scientificNotationSpecifies whether numerical values should be displayed in scientific notation (e.g., 1.23e+4) instead of standard decimal notation. Set to true to enable scientific notation, or false to display numbers in regular decimal format.boolean

      Specifies whether numerical values should be displayed in scientific notation (e.g., 1.23e+4) instead of standard decimal notation. Set to true to enable scientific notation, or false to display numbers in regular decimal format.

      Default value

      false

      Examples

      Markup and runtime examples for scientificNotation:

      HTML attribute:

      <smart-slider scientific-notation></smart-slider>

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

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

      Read the current value:

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

      showButtonsControls whether the buttons are visible or hidden. When enabled, the buttons will be displayed in the user interface; when disabled, the buttons will be hidden from view.boolean

      Controls whether the buttons are visible or hidden. When enabled, the buttons will be displayed in the user interface; when disabled, the buttons will be hidden from view.

      Default value

      false
      Try a demo showcasing the showButtons property.

      Examples

      Markup and runtime examples for showButtons:

      HTML attribute:

      <smart-slider show-buttons></smart-slider>

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

      const el = document.querySelector('smart-slider');
el.showButtons = false;

      Read the current value:

      const el = document.querySelector('smart-slider');
const showButtons = el.showButtons;

      showThumbLabelControls whether the thumb label is visible or hidden. When enabled, the thumb label will be displayed; when disabled, it will be hidden. This option allows you to show or hide the label that appears above the slider's thumb to indicate its current value.boolean

      Controls whether the thumb label is visible or hidden. When enabled, the thumb label will be displayed; when disabled, it will be hidden. This option allows you to show or hide the label that appears above the slider's thumb to indicate its current value.

      Default value

      false

      Examples

      Markup and runtime examples for showThumbLabel:

      HTML attribute:

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

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

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

      Read the current value:

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

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

      Controls whether the tooltip is visible. 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-slider show-tooltip></smart-slider>

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

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

      Read the current value:

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

      showUnitControls whether units (such as px, %, em, etc.) are visible alongside values. When enabled, the units are displayed; when disabled, values are shown without their corresponding units.boolean

      Controls whether units (such as px, %, em, etc.) are visible alongside values. When enabled, the units are displayed; when disabled, values are shown without their corresponding units.

      Default value

      false

      Examples

      Markup and runtime examples for showUnit:

      HTML attribute:

      <smart-slider show-unit></smart-slider>

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

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

      Read the current value:

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

      significantDigitsIdentifies the number of significant digits present in a given number. This option is applicable only when the scaleType property is set to 'integer', ensuring that the operation is performed exclusively on integer values.number

      Identifies the number of significant digits present in a given number. This option is applicable only when the scaleType property is set to 'integer', ensuring that the operation is performed exclusively on integer values.

      Examples

      Markup and runtime examples for significantDigits:

      HTML:

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

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

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

      Read the current value:

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

      themeSpecifies or retrieves the visual theme applied to the element, determining its overall appearance—such as colors, fonts, and styles—according to the selected theme configuration.string

      Specifies or retrieves the visual theme applied to the element, determining its overall appearance—such as colors, fonts, and styles—according to the selected theme configuration.

      Default value

      ""
      Try a demo showcasing the theme property.

      Examples

      Markup and runtime examples for theme:

      HTML:

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

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

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

      Read the current value:

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

      thumbLabelPositionSets or retrieves the current position of the thumb label on the slider control, indicating the value selected by the user. This property allows you to programmatically update the thumb label’s position or access its current location to reflect user interactions."near" | "far"

      Sets or retrieves the current position of the thumb label on the slider control, indicating the value selected by the user. This property allows you to programmatically update the thumb label’s position or access its current location to reflect user interactions.

      Default value

      "near"
      Try a demo showcasing the thumbLabelPosition property.

      Examples

      Markup and runtime examples for thumbLabelPosition:

      HTML:

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

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

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

      Read the current value:

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

      ticksPositionDetermines or retrieves the placement of tick marks on the smartSlider widget. This property allows you to specify where the ticks appear on the slider—such as at the top, bottom, left, or right—enhancing user interaction and slider orientation."scale" | "track"

      Determines or retrieves the placement of tick marks on the smartSlider widget. This property allows you to specify where the ticks appear on the slider—such as at the top, bottom, left, or right—enhancing user interaction and slider orientation.

      Default value

      "scale"

      Examples

      Markup and runtime examples for ticksPosition:

      HTML:

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

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

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

      Read the current value:

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

      ticksVisibilityControls whether the ticks are visible or hidden. When set, this property determines if tick marks on the component are displayed; when retrieved, it indicates the current visibility status of the ticks."major" | "minor" | "none"

      Controls whether the ticks are visible or hidden. When set, this property determines if tick marks on the component are displayed; when retrieved, it indicates the current visibility status of the ticks.

      Default value

      "minor"
      Try a demo showcasing the ticksVisibility property.

      Examples

      Markup and runtime examples for ticksVisibility:

      HTML:

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

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

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

      Read the current value:

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

      tooltipPositionSpecifies or retrieves the position of the tooltip displayed on the smartSlider widget. This property determines where the tooltip appears relative to the slider handle, such as above, below, left, or right of the handle. Use this option to customize the tooltip placement to enhance user experience."near" | "far"

      Specifies or retrieves the position of the tooltip displayed on the smartSlider widget. This property determines where the tooltip appears relative to the slider handle, such as above, below, left, or right of the handle. Use this option to customize the tooltip placement to enhance user experience.

      Default value

      "near"
      Try a demo showcasing the tooltipPosition property.

      Examples

      Markup and runtime examples for tooltipPosition:

      HTML:

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

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

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

      Read the current value:

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

      unfocusableDetermines whether the element is focusable by the user (e.g., via keyboard navigation) or retrieves the current focusable state of the element. If set to true, the element can receive focus; if false, it cannot.boolean

      Determines whether the element is focusable by the user (e.g., via keyboard navigation) or retrieves the current focusable state of the element. If set to true, the element can receive focus; if false, it cannot.

      Default value

      false

      Examples

      Markup and runtime examples for unfocusable:

      HTML attribute:

      <smart-slider unfocusable></smart-slider>

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

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

      Read the current value:

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

      unitSpecifies or retrieves the unit label displayed on the smartSlider widget, indicating the measurement or value type (such as 'px', '%', 'kg', etc.) associated with the slider's current position. This property allows you to define or access the text shown next to the slider value.string

      Specifies or retrieves the unit label displayed on the smartSlider widget, indicating the measurement or value type (such as 'px', '%', 'kg', etc.) associated with the slider's current position. This property allows you to define or access the text shown next to the slider value.

      Default value

      "kg"
      Try a demo showcasing the unit property.

      Examples

      Markup and runtime examples for unit:

      HTML:

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

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

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

      Read the current value:

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

      unlockKeyDefines or retrieves the unlockKey, a unique value used to authorize and enable access to the product’s features.string

      Defines or retrieves the unlockKey, a unique value used to authorize and enable access to the product’s features.

      Default value

      ""

      Examples

      Markup and runtime examples for unlockKey:

      HTML:

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

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

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

      Read the current value:

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

      validationConfigures how the value is validated against the specified minimum and maximum limits. - When set to 'strict', all value assignments—whether made by user interaction or programmatically—are automatically validated and coerced to remain within the min and max bounds. - When set to 'interaction', only values entered or changed by user interaction are validated and coerced to the min and max limits. Programmatic value changes are not automatically adjusted, and if the min or max is updated such that the current value falls outside the new range, the value remains unchanged. In this mode, no change event is triggered when values remain out of bounds following these updates."strict" | "interaction"

      Configures how the value is validated against the specified minimum and maximum limits.
      - When set to 'strict', all value assignments—whether made by user interaction or programmatically—are automatically validated and coerced to remain within the min and max bounds.
      - When set to 'interaction', only values entered or changed by user interaction are validated and coerced to the min and max limits. Programmatic value changes are not automatically adjusted, and if the min or max is updated such that the current value falls outside the new range, the value remains unchanged. In this mode, no change event is triggered when values remain out of bounds following these updates.

      Default value

      "strict"

      Examples

      Markup and runtime examples for validation:

      HTML:

      <smart-slider validation="strict"></smart-slider>

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

      const el = document.querySelector('smart-slider');
el.validation = "interaction";

      Read the current value:

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

      valueSets or retrieves the current value of the smartSlider widget. This property is applicable only when the rangeSlider option is set to false, meaning the slider operates in single-value mode rather than as a range selector. When you use this property, you can either specify a new value for the slider or obtain the current value the slider is set to.any

      Sets or retrieves the current value of the smartSlider widget. This property is applicable only when the rangeSlider option is set to false, meaning the slider operates in single-value mode rather than as a range selector. When you use this property, you can either specify a new value for the slider or obtain the current value the slider is set to.

      Default value

      0
      Try a demo showcasing the value property.

      Examples

      Markup and runtime examples for value:

      HTML:

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

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

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

      Read the current value:

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

      valuesGets or sets the current value of the smartSlider widget. When the rangeSlider property is set to true, this property manages the values for both slider handles, typically as an array representing the selected range. For a single-value slider, it represents the selected value. Use this property to programmatically retrieve or update the slider's value(s). number[]

      Gets or sets the current value of the smartSlider widget. When the rangeSlider property is set to true, this property manages the values for both slider handles, typically as an array representing the selected range. For a single-value slider, it represents the selected value. Use this property to programmatically retrieve or update the slider's value(s).

      Try a demo showcasing the values property.

      Examples

      Markup and runtime examples for values:

      HTML:

      <smart-slider values="['10', '50']"></smart-slider>

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

      const el = document.querySelector('smart-slider');
el.values = ['20', '70'];

      Read the current value:

      const el = document.querySelector('smart-slider');
const values = el.values;

      wordLengthSets or retrieves the word length value, which determines the number of bits used to represent each integer value. This property is only relevant when scaleType is set to 'integer'. If scaleType has any other value, this property is ignored."int8" | "uint8" | "int16" | "uint16" | "int32" | "uint32" | "int64" | "uint64"

      Sets or retrieves the word length value, which determines the number of bits used to represent each integer value. This property is only relevant when scaleType is set to 'integer'. If scaleType has any other value, this property is ignored.

      Default value

      "int32"

      Examples

      Markup and runtime examples for wordLength:

      HTML:

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

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

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

      Read the current value:

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

      Events

      changeThis event is triggered each time the user changes the value of the slider, either by dragging the handle or through keyboard input. It allows you to respond programmatically whenever the slider’s value is updated, such as by updating a display label or synchronizing the value with other form elements.CustomEvent

      This event is triggered each time the user changes the value of the slider, either by dragging the handle or through keyboard input. It allows you to respond programmatically whenever the slider’s value is updated, such as by updating a display label or synchronizing the value with other form elements.

      • Bubbles Yes
      • Cancelable No
      • Interface CustomEvent
      • Event handler property onChange

      Arguments

      evCustomEvent
      ev.detailObject
      ev.detail.value - A numeric value indicating the scroll position.
      ev.detail.oldValue - A numeric value indicating the previous scroll position.

      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-slider')?.addEventListener('change', (event) => {
    const detail = event.detail,
        value = detail.value,
        oldValue = detail.oldValue;

	// event handling code goes here.
})

      Methods

      focus(): voidSets the keyboard focus to the slider element, enabling users to interact with the slider using keyboard controls such as arrow keys, page up/down, and home/end. This facilitates accessibility and allows improved navigation for users relying on keyboard input.

      Sets the keyboard focus to the slider element, enabling users to interact with the slider using keyboard controls such as arrow keys, page up/down, and home/end. This facilitates accessibility and allows improved navigation for users relying on keyboard input.

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

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

      getOptimalSize(): objectRetrieves the most suitable width and height dimensions for the widget based on its content, layout constraints, and current configuration. Use this method to determine the preferred size the widget should be rendered to ensure optimal display and usability.

      Retrieves the most suitable width and height dimensions for the widget based on its content, layout constraints, and current configuration. Use this method to determine the preferred size the widget should be rendered to ensure optimal display and usability.

      Returnsobject

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

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

      val( value?: string | number | number[] | string[]): stringRetrieves or assigns the current value of the slider component. When used as a getter, it returns the slider’s present value. When used as a setter, it updates the slider to the specified value and triggers any associated change events or callbacks.

      Retrieves or assigns the current value of the slider component. When used as a getter, it returns the slider’s present value. When used as a setter, it updates the slider to the specified value and triggers any associated change events or callbacks.

      Arguments

      value?string | number | number[] | string[]

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

      Returnsstring

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

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

      Try a demo showcasing the val method.

      CSS Variables

      --smart-slider-default-widthvar()

      Default value

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

      smartSlider default width

      --smart-slider-default-heightvar()

      Default value

      "35px"

      smartSlider default height

      --smart-slider-track-sizevar()

      Default value

      "1px"

      smartSlider track size. Horizontal track height = Vertical track width

      --smart-slider-thumb-widthvar()

      Default value

      "20px"

      smartSlider thumb width

      --smart-slider-thumb-heightvar()

      Default value

      "20px"

      smartSlider thumb height

      --smart-slider-tooltip-widthvar()

      Default value

      "60px"

      smartSlider tooltip width

      --smart-slider-tooltip-heightvar()

      Default value

      "30px"

      smartSlider tooltip height

      --smart-slider-spin-button-widthvar()

      Default value

      "30px"

      smartSlider spin buttons width

      --smart-slider-spin-button-heightvar()

      Default value

      "30px"

      smartSlider spin buttons height

      --smart-slider-tick-sizevar()

      Default value

      "10px"

      smartSlider tick size. Horizontal Slider tick height = Vertical Slider tick width.

      --smart-slider-minor-tick-sizevar()

      Default value

      "5px"

      smartSlider minor tick size. Horizontal Slider minor tick height = Vertical Slider minor tick width.

      --smart-slider-thumb-border-top-right-radiusvar()

      Default value

      "15px"

      Top-right border radius of smartSlider thumb

      --smart-slider-thumb-border-top-left-radiusvar()

      Default value

      "15px"

      Top-left border radius of smartSlider thumb

      --smart-slider-thumb-border-bottom-left-radiusvar()

      Default value

      "15px"

      Bottom-left border radius of smartSlider thumb

      --smart-slider-thumb-border-bottom-right-radiusvar()

      Default value

      "15px"

      Bottom-right border radius of smartSlider thumb