Slider JAVASCRIPT UI Component API

Slider Javascript API

Class

Slider

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

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"

Example

Set the animation property.

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

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

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

 slider.animation = 'simple';

Get the animation property.

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

 let animation = slider.animation;

coerceboolean

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

Example

Set the coerce property.

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

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

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

 slider.coerce = false;

Get the coerce property.

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

 let coerce = slider.coerce;

customIntervalboolean

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

Example

Set the customInterval property.

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

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

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

 slider.customInterval = false;

Get the customInterval property.

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

 let customInterval = slider.customInterval;

customTicksnumber[]

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.

Example

Set the customTicks property.

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

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

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

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

Get the customTicks property.

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

 let customTicks = slider.customTicks;

dateLabelFormatStringstring

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"

Example

Set the dateLabelFormatString property.

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

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

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

 slider.dateLabelFormatString = 'FP';

Get the dateLabelFormatString property.

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

 let dateLabelFormatString = slider.dateLabelFormatString;

decimalSeparatorstring

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

"".""

Example

Set the decimalSeparator property.

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

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

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

 slider.decimalSeparator = '.';

Get the decimalSeparator property.

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

 let decimalSeparator = slider.decimalSeparator;

disabledboolean

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

Example

Set the disabled property.

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

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

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

 slider.disabled = false;

Get the disabled property.

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

 let disabled = slider.disabled;

enableMouseWheelActionboolean

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

Example

Set the enableMouseWheelAction property.

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

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

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

 slider.enableMouseWheelAction = false;

Get the enableMouseWheelAction property.

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

 let enableMouseWheelAction = slider.enableMouseWheelAction;

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

Example

Set the interval property.

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

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

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

 slider.interval = 3;

Get the interval property.

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

 let interval = slider.interval;

invertedboolean

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

Example

Set the inverted property.

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

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

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

 slider.inverted = false;

Get the inverted property.

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

 let inverted = slider.inverted;

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

Example

Set the labelFormatFunction property.

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

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

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

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

Get the labelFormatFunction property.

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

 let labelFormatFunction = slider.labelFormatFunction;

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

Example

Set the labelsVisibility property.

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

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

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

 slider.labelsVisibility = 'none';

Get the labelsVisibility property.

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

 let labelsVisibility = slider.labelsVisibility;

unlockKeystring

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

Default value

Example

Set the unlockKey property.

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

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

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

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

Get the unlockKey property.

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

 let unlockKey = slider.unlockKey;

localestring

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"

Example

Set the locale property.

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

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

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

 slider.locale = 'fr';

Get the locale property.

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

 let locale = slider.locale;

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

Example

Set the localizeFormatFunction property.

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

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

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

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

Get the localizeFormatFunction property.

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

 let localizeFormatFunction = slider.localizeFormatFunction;

logarithmicScaleboolean

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

Example

Set the logarithmicScale property.

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

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

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

 slider.logarithmicScale = false;

Get the logarithmicScale property.

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

 let logarithmicScale = slider.logarithmicScale;

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

Example

Set the max property.

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

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

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

 slider.max = 50;

Get the max property.

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

 let max = slider.max;

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

Example

Set the mechanicalAction property.

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

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

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

 slider.mechanicalAction = 'switchUntilReleased';

Get the mechanicalAction property.

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

 let mechanicalAction = slider.mechanicalAction;

messagesobject

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

}

Example

Set the messages property.

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

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

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

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

Get the messages property.

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

 let messages = slider.messages;

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

Example

Set the min property.

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

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

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

 slider.min = 50;

Get the min property.

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

 let min = slider.min;

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

Example

Set the mode property.

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

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

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

 slider.mode = 'numeric';

Get the mode property.

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

 let mode = slider.mode;

namestring

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

Example

Set the name property.

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

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

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

 slider.name = 'slider2';

Get the name property.

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

 let name = slider.name;

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

Example

Set the orientation property.

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

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

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

 slider.orientation = 'horizontal';

Get the orientation property.

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

 let orientation = slider.orientation;

precisionDigitsnumber

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.

Example

Set the precisionDigits property.

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

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

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

 slider.precisionDigits = 6;

Get the precisionDigits property.

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

 let precisionDigits = slider.precisionDigits;

rangeSliderboolean

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

Example

Set the rangeSlider property.

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

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

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

 slider.rangeSlider = false;

Get the rangeSlider property.

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

 let rangeSlider = slider.rangeSlider;

readonlyboolean

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

Example

Set the readonly property.

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

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

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

 slider.readonly = true;

Get the readonly property.

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

 let readonly = slider.readonly;

rightToLeftboolean

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.

Example

Set the rightToLeft property.

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

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

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

 slider.rightToLeft = true;

Get the rightToLeft property.

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

 let rightToLeft = slider.rightToLeft;

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

Example

Set the scalePosition property.

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

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

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

 slider.scalePosition = 'both';

Get the scalePosition property.

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

 let scalePosition = slider.scalePosition;

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

Example

Set the scaleType property.

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

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

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

 slider.scaleType = 'floatingPoint';

Get the scaleType property.

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

 let scaleType = slider.scaleType;

scientificNotationboolean

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

Example

Set the scientificNotation property.

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

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

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

 slider.scientificNotation = true;

Get the scientificNotation property.

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

 let scientificNotation = slider.scientificNotation;

showButtonsboolean

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

Example

Set the showButtons property.

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

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

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

 slider.showButtons = false;

Get the showButtons property.

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

 let showButtons = slider.showButtons;

showThumbLabelboolean

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

Example

Set the showThumbLabel property.

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

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

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

 slider.showThumbLabel = true;

Get the showThumbLabel property.

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

 let showThumbLabel = slider.showThumbLabel;

showTooltipboolean

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

Default value

false

Example

Set the showTooltip property.

 <smart-slider show-tooltip></smart-slider>

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

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

 slider.showTooltip = false;

Get the showTooltip property.

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

 let showTooltip = slider.showTooltip;

showUnitboolean

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

Example

Set the showUnit property.

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

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

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

 slider.showUnit = false;

Get the showUnit property.

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

 let showUnit = slider.showUnit;

significantDigitsnumber

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.

Example

Set the significantDigits property.

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

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

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

 slider.significantDigits = 2;

Get the significantDigits property.

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

 let significantDigits = slider.significantDigits;

themestring

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

Example

Set the theme property.

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

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

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

 slider.theme = 'material-purple';

Get the theme property.

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

 let theme = slider.theme;

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

Example

Set the thumbLabelPosition property.

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

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

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

 slider.thumbLabelPosition = 'near';

Get the thumbLabelPosition property.

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

 let thumbLabelPosition = slider.thumbLabelPosition;

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

Example

Set the ticksPosition property.

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

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

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

 slider.ticksPosition = 'scale';

Get the ticksPosition property.

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

 let ticksPosition = slider.ticksPosition;

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

Example

Set the ticksVisibility property.

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

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

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

 slider.ticksVisibility = 'none';

Get the ticksVisibility property.

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

 let ticksVisibility = slider.ticksVisibility;

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

Example

Set the tooltipPosition property.

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

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

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

 slider.tooltipPosition = 'near';

Get the tooltipPosition property.

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

 let tooltipPosition = slider.tooltipPosition;

unfocusableboolean

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

Example

Set the unfocusable property.

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

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

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

 slider.unfocusable = false;

Get the unfocusable property.

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

 let unfocusable = slider.unfocusable;

unitstring

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"

Example

Set the unit property.

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

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

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

 slider.unit = 'cm';

Get the unit property.

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

 let unit = slider.unit;

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

Example

Set the validation property.

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

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

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

 slider.validation = 'interaction';

Get the validation property.

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

 let validation = slider.validation;

valueany

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

Example

Set the value property.

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

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

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

 slider.value = 100;

Get the value property.

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

 let value = slider.value;

valuesnumber[]

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

Example

Set the values property.

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

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

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

 slider.values = ['20', '70'];

Get the values property.

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

 let values = slider.values;

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

Example

Set the wordLength property.

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

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

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

 slider.wordLength = 'int16';

Get the wordLength property.

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

 let wordLength = slider.wordLength;

Events

changeCustomEvent

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.

Example

Set up the event handler of change event.

const slider = document.querySelector('smart-slider');
slider.addEventListener('change', function (event) {
    const detail = event.detail,
        value = detail.value,
        oldValue = detail.oldValue;

	// event handling code goes here.
})

Methods

focus(): void

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.

Invoke the focus method.

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

getOptimalSize(): object

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

Invoke the getOptimalSize method.

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

val( value?: string | number | number[] | string[]): string

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

Invoke the val method.

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

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

Default value

"60px"

smartSlider tooltip width

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

Slider Javascript API

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

Default value

Example

coerceboolean

Default value

Example

customIntervalboolean

Default value

Example

customTicksnumber[]

Example

dateLabelFormatStringstring

Default value

Example

decimalSeparatorstring

Default value

Example

disabledboolean

Default value

Example

enableMouseWheelActionboolean

Default value

Example

intervalstring | number

Default value

Example

invertedboolean

Default value

Example

labelFormatFunctionfunction | null

Example

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

Default value

Example

unlockKeystring

Default value

Example

localestring

Default value

Example

localizeFormatFunctionfunction | null

Example

logarithmicScaleboolean

Default value

Example

maxstring | number

Default value

Example

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

Default value

Example

messagesobject

Default value

Example

minstring | number

Default value

Example

mode"numeric" | "date"

Default value

Example

namestring

Default value

Example

orientation"horizontal" | "vertical"

Default value

Example

precisionDigitsnumber

Example