Constructor
JavaScript:
-
new Coral.Slider()
ordocument.createElement('coral-slider')
HTML Tag:
-
<coral-slider>
Extends
Sub-components
Static Properties
-
Coral.Slider.orientation {String}
-
Properties:
Name Type Value Description HORIZONTAL String horizontal Horizontal slider. VERTICAL String vertical Vertical slider.
Slider orientations.
Instance Properties
-
instance.disabled {Boolean}
Reflected -
- Default Value:
- false
- HTML Attribute:
- disabled
-
instance.filled {Boolean}
Reflected -
- Default Value:
- false
- HTML Attribute:
- filled
-
instance.hidden {Boolean}
Reflected -
- Inherited From:
- Default Value:
- false
- HTML Attribute:
- hidden
-
instance.invalid {Boolean}
Reflected -
- Inherited From:
- Default Value:
- false
- HTML Attribute:
- invalid
-
instance.items {Coral.Collection}
Readonly -
-
instance.labelledBy {String}
-
- Inherited From:
- Default Value:
- null
- HTML Attribute:
- labelledby
-
instance.max {Number}
Reflected -
- Default Value:
- 100
- HTML Attribute:
- max
-
instance.min {Number}
Reflected -
- Default Value:
- 1
- HTML Attribute:
- min
-
instance.name {String}
Reflected -
- Inherited From:
- Default Value:
- ""
- HTML Attribute:
- name
-
instance.orientation {Coral.Slider.orientation}
-
- Default Value:
- Coral.Slider.orientation.HORIZONTAL
- HTML Attribute:
- orientation
-
instance.readOnly {Boolean}
Reflected -
- Inherited From:
- Default Value:
- false
- HTML Attribute:
- readonly
-
instance.required {Boolean}
Reflected -
- Inherited From:
- Default Value:
- false
- HTML Attribute:
- required
-
instance.step {Number}
Reflected -
- Default Value:
- 1
- HTML Attribute:
- step
-
instance.tooltips {Boolean}
Reflected -
- Default Value:
- false
- HTML Attribute:
- tooltips
-
instance.value {String}
-
- Default Value:
- HTML Attribute:
- value
-
instance.valueAsNumber {Number}
-
- Default Value:
- NaN
Whether this field is disabled or not. This value is reflected as an attribute in the DOM. Implementers should
additionally set 'aria-disabled' to improve accessibility of the component.
Fill a value or value range using a highlight color.
Whether this component is hidden or not.
Whether the current value of this field is invalid or not.
The Collection Interface that allows interacting with the items that the component contains. See
Coral.Collection for more details.
Reference to a space delimited set of ids for the HTML elements that provide a label for the formField.
Implementers should override this method to ensure that the appropriate descendant elements are labelled using the
aria-labelledby
attribute. This will ensure that the component is properly identified for
accessibility purposes. It reflects the aria-labelledby
attribute to the DOM.
The maximum value.
The minimum value.
Name used to submit the data in a form.
Orientation of the slider, which can be VERTICAL or HORIZONTAL.
Whether this field is readOnly or not. Indicating that the user cannot modify the value of the control.
This is ignored for checkbox, radio or fileupload.
Whether this field is required or not.
Increment value of one step.
Display tooltips for the slider value.
The current value of the slider.
The value returned as a Number. Value is
NaN
if conversion to Number is not possible.
Methods
-
instance.get
-
- Parameters:
-
Name Type Description property String The name of the property to fetch the value of. - Returns:
-
Property value. {*}
- Inherited From:
-
instance.hide
-
- Returns:
-
this, chainable {Coral.Component}
- Inherited From:
-
instance.off
-
- Parameters:
-
Name Type Optional Description eventName String No
The event name to stop listening for. selector String Yes
The selector that was used for event delegation. func function No
The function that was passed to on()
.useCapture Boolean Yes
Only remove listeners with useCapture
set to the value passed in. - Returns:
-
this, chainable. {Coral.Component}
- Inherited From:
-
instance.on
-
- Parameters:
-
Name Type Optional Default Description eventName String No
The event name to listen for. selector String Yes
The selector to use for event delegation. func function No
The function that will be called when the event is triggered. useCapture Boolean Yes
Whether or not to listen during the capturing or bubbling phase. - Returns:
-
this, chainable. {Coral.Component}
- Inherited From:
-
instance.remove
-
- Inherited From:
-
instance.set
-
- Parameters:
-
Name Type Description property String The name of the property to set. value * The value to set the property to. silent Boolean If true, events should not be triggered as a result of this set. - Returns:
-
this, chainable. {Coral.Component}
- Inherited From:
-
instance.show
-
- Returns:
-
this, chainable {Coral.Component}
- Inherited From:
-
instance.trigger
-
- Parameters:
-
Name Type Optional Default Description eventName String No
The event name to trigger. props Object Yes
Additional properties to make available to handlers as event.detail
.bubbles Boolean Yes
Set to false
to prevent the event from bubbling.cancelable Boolean Yes
Set to false
to prevent the event from being cancelable. - Returns:
-
CustomEvent object {CustomEvent}
- Inherited From:
Get the value of a property.
Hide this component.
Remove an event listener.
Add an event listener.
Non-destructively remove this element. It can be re-added by simply appending it to the document again.
It will be garbage collected if there are no more references to it.
Set a single property.
Show this component.
Trigger an event.
Events
-
change
-
- Callback Parameters:
-
Name Type Description event Object Event object.
- Inherited From:
-
coral-component:attached
-
- Callback Parameters:
-
Name Type Description event Object Event object.
- Inherited From:
- Deprecated:
- since 1.14.0, use
MutationObserver
instead.
- since 1.14.0, use
-
coral-component:detached
-
- Callback Parameters:
-
Name Type Description event Object Event object.
- Inherited From:
- Deprecated:
- since 1.14.0, use
MutationObserver
instead.
- since 1.14.0, use
-
coral-component:ready
-
- Callback Parameters:
-
Name Type Description event Object Event object.
- Inherited From:
- Deprecated:
- since 1.9.0, use
Coral.commons.ready()
instead.
- since 1.9.0, use
Triggered when the value has changed. This event is only triggered by user interaction.
Triggered when the component is attached to the DOM.
Triggered when the component is detached to the DOM.
Triggerred when the component has been upgraded and is ready for use.