Slider
Sliders allow users to make selections from a range of values.
Selector
smart-slider
Properties
animationAnimation
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
Default valueadvanced
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 valuefalse
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 valuefalse
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.
dateLabelFormatStringstring
Sets or gets the pattern which labels are displayed in when mode is 'date'.
Default value"d
decimalSeparatorstring
Sets or gets the char to use as the decimal separator in numeric values.
Default value""."
disabledboolean
Enables or disables the widget.
Default valuefalse
enableMouseWheelActionboolean
Enables or disables incrementing/decrementing the value using the mouse wheel in smartSlider.
Default valuefalse
intervalany
Determines what values the thumb snaps to.
Default value1
invertedboolean
Sets the direction of the slider. If is true - positions of the slider's begin and end are changed.
Default valuefalse
labelFormatFunctionany
A callback function that can be used to format the values displayed on the slider labels and tooltip.
labelsVisibilityLabelsVisibility
Sets or gets the widget's label visibility.
Default valueall
localestring
Sets or gets the locale. Used in conjunction with the property messages.
Default value"en
localizeFormatFunctionany
Callback, related to localization module.
logarithmicScaleboolean
Enables or disables the usage of logarithmic scale in the widget.
Default valuefalse
maxany
Sets or gets the maximum value of the widget.
Default value100
mechanicalActionDragMechanicalAction
Sets or gets the type of used mechanical action.
Default valueswitchWhileDragging
messagesany
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."
}
minany
Sets or gets the minimum value of the widget.
Default value0
modeScaleMode
Sets or gets whether the widget works with numbers or dates.
Default valuenumeric
namestring
Sets or gets the element's name, which is used as a reference when the data is submitted.
Default value"
orientationOrientation
Sets the orientation of the widget.
Default valuehorizontal
precisionDigitsnumber
Determines the number of digits after the decimal point. Applicable only when scaleType is 'integer'.
rangeSliderboolean
Enables or disables the slider to be in range mode. If is set to true, the range is represented between two thumbs.
Default valuefalse
readonlyboolean
When the slider is read only the users cannot drag or click in the fill of the slider.
Default valuefalse
scalePositionScalePosition
Sets the position of the widget's scales.
Default valuenear
scaleTypeScaleType
Sets the type of the slider's scale.
Default valuefloatingPoint
scientificNotationboolean
Enables or disables scientific notation.
Default valuefalse
showButtonsboolean
Enables or disables displaying of the buttons.
Default valuefalse
showThumbLabelboolean
Enables or disables displaying of the thumb label.
Default valuefalse
showTooltipboolean
Enables or disables displaying of the tooltip.
Default valuefalse
showUnitboolean
Enables or disables displaying of the units.
Default valuefalse
significantDigitsnumber
Determining how many significant digits are in a number. Applicable only when scaleType is 'integer'.
themestring
Sets or gets the element's visual theme.
Default value"
thumbLabelPositionPosition
Sets or gets the position of the thumb label.
Default valuenear
ticksPositionTicksPosition
Sets or gets the position of the ticks in smartSlider widget.
Default valuescale
ticksVisibilityTicksVisibility
Sets or gets the visibility of the ticks.
Default valueminor
tooltipPositionPosition
Sets or gets the position of the tooltip in smartSlider widget.
Default valuenear
unfocusableboolean
Sets or gets if the element can be focused.
Default valuefalse
unitstring
Sets or gets the name of unit used in smartSlider widget.
Default value"kg
validationValidation
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 valuestrict
valueany
Sets or gets the value of the smartSlider widget. The property is used when the rangeSlider property is set to false.
Default value0
valuesnumber[]
Sets or gets the value of the smartSlider widget. The property is used when the rangeSlider property is set to true.
wordLengthWordLength
Sets or gets the word length. Applicable only when scaleType is 'integer'.
Default valueint32
onchange((this: Window, ev: Event) => any) | null
This event is triggered when the value of the slider is changed.
Arguments
evEvent
Methods
focus(): void
Focuses the slider.
getOptimalSize(): any
Gets the optimal size of the widget.
Returnsany
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