new Slider(id, properties) → {Object}
Parameters:
| Name |
Type |
Description |
id |
String
|
The id of the component. |
properties |
Object
|
HTMLElement
|
The properties used to initialize the component or the container element. |
- Mixes In:
Returns:
An instance of the component.
-
Type
-
Object
Extends
Classes
- SliderEvents
Members
animation :Boolean
Gets or sets a value indicating if the css animation is activated when the track is selected.
Type:
decimalPlaces :Number
Gets or sets the decimal places used when displaying tickmark values.
Type:
decimalSeparator :String
Gets or sets the decimal separator used when displaying tickmark values.
Type:
Gets or sets the id of the decrease button from which the settings are cloned.
Type:
disabled :Boolean
Gets or sets a value indicating if the slider is disabled.
Type:
Type:
Gets or sets the id of the hidden input from which the attributes and properties are cloned. The hidden input contains the selected value.
Type:
Gets or sets the id of the increase button from which the settings are cloned.
Type:
majorTickMarkStep :Number
Gets or sets the tickmark step on which a major tick is rendered. 0 means never, 1 means every item, 2 means every 2nd item and so on.
Type:
maxChange :Number
Gets or sets the maximum change in value. If a maximum value is not set the handle can move to any clicked position in the track.
Type:
maxValue :Number
Gets or sets the maximum value.
Type:
minChange :Number
Gets or sets the minimum change in value.
Type:
minValue :Number
Gets or sets the minimum value.
Type:
minorTickMarkStep :Number
Gets or sets the tickmark step on which a minor tick is rendered. 0 means never, 1 means every item, 2 means every 2nd item and so on.
Type:
range :Boolean
Gets or sets a value indicating if the slider has a start- and end-handle to set a range.
Type:
Gets or sets the id of the range hidden input from which the attributes and properties are cloned. The hidden input contains both the selected range start and end value.
Type:
reversed :Boolean
Gets or sets a value indicating if the slider is rendered in reverse direction.
Type:
Gets or sets a value indicating if the increase and decrease buttons are displayed.
Type:
Gets or sets a value indicating if tooltips are displayed when there are value changes.
Type:
Gets or sets the id of the range-start hidden input from which the attributes and properties are cloned. The hidden input contains the selected range start value.
Type:
startValue :Number
Gets or sets the start value of the range slider.
Type:
tickMarkLabels :Object.<number, string>
Gets or sets the tickmark labels when text instead of a numeric value is desired.
Type:
Gets or sets a value indicating where the tickmark side is rendered.
Type:
Gets or sets a value indicating where the tickmark values are rendered.
Type:
tickMarkValueStep :Number
Gets or sets the tickmark step on which a value is rendered. 0 means never, 1 means every item, 2 means every 2nd item.
Type:
tickMarks :Number
Gets or sets the amount of rendered tickmarks.
Type:
Gets or sets the id of the tooltip manager from which the settings are cloned.
Type:
trackSize :String|Number
Gets or sets the track size. If a track size is defined the CSS class 'fixed-track-size' is appended to the root element. You can also control the slider’s dimensions via CSS, either on the track or the root element.
Type:
value :Number|null
Gets or sets the value (end value in range) of the slider. If range is set to true and this value is not set it will take the maxValue by default, otherwise it defaults to the minValue or 0.
Type:
vertical :Boolean
Gets or sets a value indicating if the slider is rendered vertically.
Type:
(static, readonly) TickMarkSideOption :number
Type:
Properties:
| Name |
Type |
Description |
NONE |
number
|
|
BEFORE |
number
|
|
AFTER |
number
|
|
BOTH |
number
|
|
Methods
destroy()
- See:
-
getValue() → {Number|Array.<Number>}
Gets the selected slider value(s).
Returns:
The value for a slider or the range start and end values for a range slider.
-
Type
-
Number
|
Array.<Number>
postRender()
Handles the post render procedure.
render()
setStartValue(value)
Sets the start value in a range slider.
Parameters:
| Name |
Type |
Description |
value |
Number
|
The start value to set. |
setStartValueTemplate(content)
Sets the start value template. The template supports the below listed interpolations.
- {value} This value will be replaced with the selected value or label text.
Parameters:
| Name |
Type |
Description |
content |
HTMLElement
|
Array.<HTMLElement>
|
DocumentFragment
|
String
|
The HTML template. |
setValue(value)
Parameters:
| Name |
Type |
Description |
value |
Number
|
The value to set. |
setValueTemplate(content)
Sets the value template. The template supports the below listed interpolations.
- {value} This value will be replaced with the selected value or label text.
Parameters:
| Name |
Type |
Description |
content |
HTMLElement
|
Array.<HTMLElement>
|
DocumentFragment
|
String
|
The HTML template. |
suppressNextChangeEvent(action)
Suppresses any change events fired by the underlying input element during the execution of the provided action. Use this when programmatically setting a component value to prevent the change event from propagating as a user interaction.
The suppression is automatically lifted after the action completes, even if it throws.
Parameters:
| Name |
Type |
Description |
action |
function
|
The action to execute with change events suppressed. |
- Mixes In:
Type Definitions
ChangeEventArgs
Slider change event arguments.
Type:
Properties:
| Name |
Type |
Description |
isStart |
Boolean
|
A value indicating if the range start value changed instead of the (end) value. |
value |
Number
|
null
|
The new value. |