Slider JAVASCRIPT UI Component API

Slider Javascript API

Class

Slider

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

Properties

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

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

Allowed Values

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

Default value

"advanced"

Example

Set 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

With the coerce property true and clicking the track, the thumb and value are moved and set to the nearest value allowed by the interval property.

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

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

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

If customInterval is enabled, sets a list of ticks to be plotted. If coerce is set to true, the value will snap to these ticks.

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 gets the pattern which labels are displayed in when mode is 'date'.

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

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

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

Enables or disables the widget.

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

Enables or disables incrementing/decrementing the value using the mouse wheel in smartSlider.

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

Determines what values the thumb snaps to.

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

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

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 can be used to format the values displayed on the slider labels and tooltip.

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"

Sets or gets the widget's label visibility.

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;

localestring

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

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, related to localization module.

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

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

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

Sets or gets the maximum value of the widget.

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"

Sets or gets the type of used mechanical action.

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

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property 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

Sets or gets the minimum value of the widget.

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"

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

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 gets the element's name, which is used as a reference when the data is submitted.

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"

Sets the orientation of 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

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

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 to be in range mode. If is set to true, the range is represented between two thumbs.

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 read only the users cannot drag or click in the fill of the slider.

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

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

Default value

false

Try a demo showcasing 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"

Sets the position of the widget's scales.

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"

Sets the type of the slider's scale.

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

Enables or disables scientific notation.

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

Enables or disables displaying of the buttons.

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

Enables or disables displaying of the thumb label.

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

Enables or disables displaying of the tooltip.

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

Enables or disables displaying of the 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

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

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

Sets or gets the element's visual theme.

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 gets the position of the thumb label.

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"

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

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"

Sets or gets the visibility 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"

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

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

Sets or gets if the element can be focused.

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

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

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"

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

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 gets the value of the smartSlider widget. The property is used when the rangeSlider property is set to false.

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

Sets or gets the value of the smartSlider widget. The property is used when the rangeSlider property is set to true.

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 gets the word length. Applicable only when scaleType is 'integer'.

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 when the value of the slider is changed.

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

Focuses the slider.

Invoke the focus method.

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

getOptimalSize(): object

Gets the optimal size of the widget.

Returnsobject

Invoke the getOptimalSize method.

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

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

Get/set the value of the slider.

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