Coral.Slider

Current Version: 4.0.2
Note:Any Coral CSS classes and attributes not explicitly mentioned in the public documentation are private and subject to change. Their direct use is not recommended and at high risk of breaking after subsequent updates of CoralUI library. For technical details of how to use Coral safely, please refer to the CoralUI Architecture.
Related Components: Coral.Tooltip
Github: @coralui/coralui-component-slider

Markup Examples

|

Basic

The following is an example of a slider with a min="10", max="20", and step="2".
Show Markup 
<label id="label-basic-0">
  Basic Horizontal Slider<br>
</label>
<coral-slider value="14" min="10" max="20" step="2" labelledby="label-basic-0">
</coral-slider>

Tooltips

The following is an example of a configuration with tooltips, specified via tooltips attribute.
Show Markup 
<label id="label-tooltips-0">
  Tooltips Slider<br>
</label>
<coral-slider value="14" min="10" max="20" step="2" labelledby="label-tooltips-0" tooltips>
</coral-slider>

Filled

The following is an example of a configuration with a filled bar, specified via filled attribute.
Show Markup 
<label id="label-filled-0">
  Filled Slider<br>
</label>
<coral-slider value="14" min="10" max="20" step="2" labelledby="label-filled-0" filled>
</coral-slider>

Items

The following is an example of a slider with label items.
First Second Third Fourth Fifth
Show Markup 
<label id="label-items-0">
  Items Slider<br>
</label>
<coral-slider value="2" min="1" max="5" step="1" labelledby="label-items-0" tooltips>
  <coral-slider-item value="1">First</coral-slider-item>
  <coral-slider-item value="2">Second</coral-slider-item>
  <coral-slider-item value="3">Third</coral-slider-item>
  <coral-slider-item value="4">Fourth</coral-slider-item>
  <coral-slider-item value="5">Fifth</coral-slider-item>
</coral-slider>

Ranged Slider

|

Basic

The following is an example of a ranged slider with a min="10", max="20", and step="2".
Show Markup 
<label id="label-basic-10">
  Basic Horizontal rangedSlider<br>
</label>
<coral-rangedslider startvalue="4" endvalue="12" min="2" max="20" step="2" labelledby="label-basic-10">
</coral-rangedslider>

Tooltips

The following is an example of a configuration with tooltips, specified via tooltips attribute.
Show Markup 
<label id="label-tooltips-10">
  Tooltips rangedSlider<br>
</label>
<coral-rangedslider startvalue="8" endvalue="18" min="2" max="20" step="2" labelledby="label-tooltips-10" tooltips>
</coral-rangedslider>

Items

The following is an example of a ranged slider with label items.
First Second Third Fourth Fifth
Show Markup 
<label id="label-items-10">
  Items rangedSlider<br>
</label>
<coral-rangedslider startvalue="1" endvalue="4" min="1" max="5" step="1" labelledby="label-items-10" tooltips>
  <coral-slider-item value="1">First</coral-slider-item>
  <coral-slider-item value="2">Second</coral-slider-item>
  <coral-slider-item value="3">Third</coral-slider-item>
  <coral-slider-item value="4">Fourth</coral-slider-item>
  <coral-slider-item value="5">Fifth</coral-slider-item>
</coral-rangedslider>

Forms

Vertical Layout
Show Markup 
<form class="coral-Form coral-Form--vertical u-columnSmall">
  <section class="coral-Form-fieldset">
  <div class="coral-Form-fieldwrapper">
    <label class="coral-Form-fieldlabel" id="label-vertical-slider-0">Label</label>
    <coral-slider value="14" min="10" max="20" step="2" class="coral-Form-field" labelledby="label-vertical-slider-0">
    </coral-slider>
  </div>
  <div class="coral-Form-fieldwrapper">
    <label class="coral-Form-fieldlabel" id="label-vertical-slider-1">Required</label>
    <coral-slider value="14" min="10" max="20" step="2" class="coral-Form-field" labelledby="label-vertical-slider-1" required>
    </coral-slider>
    <coral-icon class="coral-Form-fieldinfo" icon="infoCircle" size="S" id="coral-form-vertical-slider-fieldinfo"></coral-icon>
    <coral-tooltip variant="info" placement="right" target="#coral-form-vertical-slider-fieldinfo">Required Information</coral-tooltip>
  </div>
  <div class="coral-Form-fieldwrapper">
    <label class="coral-Form-fieldlabel" id="label-vertical-slider-2">Invalid</label>
    <coral-slider value="5" min="10" max="20" step="2" class="coral-Form-field" labelledby="label-vertical-slider-2">
    </coral-slider>
    <coral-icon class="coral-Form-fielderror" icon="infoCircle" size="S" id="coral-form-vertical-slider-fielderror"></coral-icon>
    <coral-tooltip variant="error" placement="right" target="#coral-form-vertical-slider-fielderror">Error Message</coral-tooltip>
  </div>
  </section>
</form>

Aligned Layout
Show Markup 
<form class="coral-Form coral-Form--aligned u-columnLarge">
  <section class="coral-Form-fieldset">
  <div class="coral-Form-fieldwrapper">
    <label class="coral-Form-fieldlabel" id="label-aligned-slider-0">Label</label>
    <coral-slider value="14" min="10" max="20" step="2" class="coral-Form-field" labelledby="label-aligned-slider-0">
    </coral-slider>
  </div>
  <div class="coral-Form-fieldwrapper">
    <label class="coral-Form-fieldlabel" id="label-aligned-slider-1">Required</label>
    <coral-slider value="14" min="10" max="20" step="2" class="coral-Form-field" labelledby="label-aligned-slider-1" required>
    </coral-slider>
    <coral-icon class="coral-Form-fieldinfo" icon="infoCircle" size="S" id="coral-form-aligned-slider-fieldinfo"></coral-icon>
    <coral-tooltip variant="info" placement="right" target="#coral-form-aligned-slider-fieldinfo">Required Information</coral-tooltip>
  </div>
  <div class="coral-Form-fieldwrapper">
    <label class="coral-Form-fieldlabel" id="label-aligned-slider-2">Invalid</label>
    <coral-slider value="5" min="10" max="20" step="2" class="coral-Form-field" labelledby="label-aligned-slider-2">
    </coral-slider>
    <coral-icon class="coral-Form-fielderror" icon="infoCircle" size="S" id="coral-form-aligned-slider-fielderror"></coral-icon>
    <coral-tooltip variant="error" placement="right" target="#coral-form-aligned-slider-fielderror">Error Message</coral-tooltip>
  </div>
  </section>
</form>

JavaScript Examples

JS Class Initialization - Slider

The following is an example of creating a Slider.
Show Markup 
<div id="sliderContainer"></div>

The following JavaScript manually initializes the component on page initialization.

<script>
  var slider = new Coral.Slider();
  slider.set({
    min: 0,
    max: 50,
    step: 2,
    value: 10,
    tooltips: true,
    id: 'slider'
  });
  document.querySelector('#sliderContainer').appendChild(slider);
</script>

JS Class Initialization - Ranged Slider

The following is an example of creating a ranged Slider. Note this is accomplished by providing startValue and endValue
Show Markup 
<div id="rangedSliderContainer"></div>

The following JavaScript manually initializes the component on page initialization.

<script>
  var rangedSlider = new Coral.RangedSlider();
  rangedSlider.set({
    min: 0,
    max: 50,
    step: 2,
    startValue: 10,
    endValue: 20,
    tooltips: true,
    id: 'rangedSlider'
  });
  document.querySelector('#rangedSliderContainer').appendChild(rangedSlider);
</script>

Coral.Slider API

Constructor

JavaScript:

new Coral.Slider() or document.createElement('coral-slider')

HTML Tag:

<coral-slider>

Extends

Sub-components

Static Properties

Coral.Slider.orientation {String}

Slider orientations.

Properties:

Name Type Value Description
HORIZONTAL String horizontal Horizontal slider.
VERTICAL String vertical Vertical slider.

Instance Properties

instance.disabled {Boolean}

Reflected
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.
Default Value:
  • false
HTML Attribute:
  • disabled

instance.filled {Boolean}

Reflected
Fill a value or value range using a highlight color.
Default Value:
  • false
HTML Attribute:
  • filled

instance.hidden {Boolean}

Reflected
Whether this component is hidden or not.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • hidden

instance.invalid {Boolean}

Reflected
Whether the current value of this field is invalid or not.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • invalid

instance.items {Coral.Collection}

Readonly
The Collection Interface that allows interacting with the items that the component contains. See Coral.Collection for more details.

instance.labelledBy {String}

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.
Inherited From:
Default Value:
  • null
HTML Attribute:
  • labelledby

instance.max {Number}

Reflected
The maximum value.
Default Value:
  • 100
HTML Attribute:
  • max

instance.min {Number}

Reflected
The minimum value.
Default Value:
  • 1
HTML Attribute:
  • min

instance.name {String}

Reflected
Name used to submit the data in a form.
Inherited From:
Default Value:
  • ""
HTML Attribute:
  • name

instance.orientation {Coral.Slider.orientation}

Orientation of the slider, which can be VERTICAL or HORIZONTAL.
Default Value:
  • Coral.Slider.orientation.HORIZONTAL
HTML Attribute:
  • orientation

instance.readOnly {Boolean}

Reflected
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.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • readonly

instance.required {Boolean}

Reflected
Whether this field is required or not.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • required

instance.step {Number}

Reflected
Increment value of one step.
Default Value:
  • 1
HTML Attribute:
  • step

instance.tooltips {Boolean}

Reflected
Display tooltips for the slider value.
Default Value:
  • false
HTML Attribute:
  • tooltips

instance.value {String}

The current value of the slider.
Default Value:
HTML Attribute:
  • value

instance.valueAsNumber {Number}

The value returned as a Number. Value is NaN if conversion to Number is not possible.
Default Value:
  • NaN

Methods

instance.get

Get the value of a property.
Parameters:
Name Type Description
property String The name of the property to fetch the value of.
Returns:
Property value. {*}
Inherited From:

instance.hide

Hide this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.off

Remove an event listener.
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

Add an event listener.
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

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.
Inherited From:

instance.set

Set a single property.
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

Show this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.trigger

Trigger an event.
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:

Events

change

Triggered when the value has changed. This event is only triggered by user interaction.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:attached

Triggered when the component is attached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:
Deprecated:
  • since 1.14.0, use MutationObserver instead.

    coral-component:detached

    Triggered when the component is detached to the DOM.
    Callback Parameters:
    Name Type Description
    event Object Event object.
    Inherited From:
    Deprecated:
    • since 1.14.0, use MutationObserver instead.

      coral-component:ready

      Triggerred when the component has been upgraded and is ready for use.
      Callback Parameters:
      Name Type Description
      event Object Event object.
      Inherited From:
      Deprecated:
      • since 1.9.0, use Coral.commons.ready() instead.

        Coral.Slider.Item API

        Constructor

        JavaScript:

        new Coral.Slider.Item() or document.createElement('coral-slider-item')

        HTML Tag:

        <coral-slider-item>

        Extends

        Instance Properties

        instance.hidden {Boolean}

        Reflected
        Whether this component is hidden or not.
        Inherited From:
        Default Value:
        • false
        HTML Attribute:
        • hidden

        instance.value {String}

        Reflected
        The slider's item value. This should contain a number formatted as a string (e.g.: "10") or an empty string.
        Default Value:
        • ""
        HTML Attribute:
        • value

        Methods

        instance.get

        Get the value of a property.
        Parameters:
        Name Type Description
        property String The name of the property to fetch the value of.
        Returns:
        Property value. {*}
        Inherited From:

        instance.hide

        Hide this component.
        Returns:
        this, chainable {Coral.Component}
        Inherited From:

        instance.off

        Remove an event listener.
        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

        Add an event listener.
        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

        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.
        Inherited From:

        instance.set

        Set a single property.
        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

        Show this component.
        Returns:
        this, chainable {Coral.Component}
        Inherited From:

        instance.trigger

        Trigger an event.
        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:

        Events

        coral-component:attached

        Triggered when the component is attached to the DOM.
        Callback Parameters:
        Name Type Description
        event Object Event object.
        Inherited From:
        Deprecated:
        • since 1.14.0, use MutationObserver instead.

          coral-component:detached

          Triggered when the component is detached to the DOM.
          Callback Parameters:
          Name Type Description
          event Object Event object.
          Inherited From:
          Deprecated:
          • since 1.14.0, use MutationObserver instead.

            coral-component:ready

            Triggerred when the component has been upgraded and is ready for use.
            Callback Parameters:
            Name Type Description
            event Object Event object.
            Inherited From:
            Deprecated:
            • since 1.9.0, use Coral.commons.ready() instead.

              Coral.RangedSlider API

              Constructor

              JavaScript:

              new Coral.RangedSlider() or document.createElement('coral-rangedslider')

              HTML Tag:

              <coral-rangedslider>

              Extends

              Instance Properties

              instance.disabled {Boolean}

              Reflected
              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.
              Inherited From:
              Default Value:
              • false
              HTML Attribute:
              • disabled

              instance.endValue {String}

              Reflected
              The ending value of the range.
              Default Value:
              HTML Attribute:
              • endValue

              instance.filled {Boolean}

              Reflected
              Fill a value or value range using a highlight color.
              Inherited From:
              Default Value:
              • false
              HTML Attribute:
              • filled

              instance.hidden {Boolean}

              Reflected
              Whether this component is hidden or not.
              Inherited From:
              Default Value:
              • false
              HTML Attribute:
              • hidden

              instance.invalid {Boolean}

              Reflected
              Whether the current value of this field is invalid or not.
              Inherited From:
              Default Value:
              • false
              HTML Attribute:
              • invalid

              instance.items {Coral.Collection}

              Readonly
              The Collection Interface that allows interacting with the items that the component contains. See Coral.Collection for more details.
              Inherited From:

              instance.labelledBy {String}

              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.
              Inherited From:
              Default Value:
              • null
              HTML Attribute:
              • labelledby

              instance.max {Number}

              Reflected
              The maximum value.
              Inherited From:
              Default Value:
              • 100
              HTML Attribute:
              • max

              instance.min {Number}

              Reflected
              The minimum value.
              Inherited From:
              Default Value:
              • 1
              HTML Attribute:
              • min

              instance.name {String}

              Reflected
              Name used to submit the data in a form.
              Inherited From:
              Default Value:
              • ""
              HTML Attribute:
              • name

              instance.orientation {Coral.Slider.orientation}

              Orientation of the slider, which can be VERTICAL or HORIZONTAL.
              Inherited From:
              Default Value:
              • Coral.Slider.orientation.HORIZONTAL
              HTML Attribute:
              • orientation

              instance.readOnly {Boolean}

              Reflected
              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.
              Inherited From:
              Default Value:
              • false
              HTML Attribute:
              • readonly

              instance.required {Boolean}

              Reflected
              Whether this field is required or not.
              Inherited From:
              Default Value:
              • false
              HTML Attribute:
              • required

              instance.startValue {String}

              Reflected
              The starting value of the range.
              Default Value:
              HTML Attribute:
              • startValue

              instance.step {Number}

              Reflected
              Increment value of one step.
              Inherited From:
              Default Value:
              • 1
              HTML Attribute:
              • step

              instance.tooltips {Boolean}

              Reflected
              Display tooltips for the slider value.
              Inherited From:
              Default Value:
              • false
              HTML Attribute:
              • tooltips

              instance.valueAsNumber {Number}

              The value returned as a Number. Value is NaN if conversion to Number is not possible.
              Inherited From:
              Default Value:
              • NaN

              instance.values {Array.<String>}

              The current values of the ranged slider.
              Default Value:

              Methods

              instance.get

              Get the value of a property.
              Parameters:
              Name Type Description
              property String The name of the property to fetch the value of.
              Returns:
              Property value. {*}
              Inherited From:

              instance.hide

              Hide this component.
              Returns:
              this, chainable {Coral.Component}
              Inherited From:

              instance.off

              Remove an event listener.
              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

              Add an event listener.
              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

              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.
              Inherited From:

              instance.set

              Set a single property.
              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

              Show this component.
              Returns:
              this, chainable {Coral.Component}
              Inherited From:

              instance.trigger

              Trigger an event.
              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:

              Events

              change

              Triggered when the value has changed. This event is only triggered by user interaction.
              Callback Parameters:
              Name Type Description
              event Object Event object.
              Inherited From:

              coral-component:attached

              Triggered when the component is attached to the DOM.
              Callback Parameters:
              Name Type Description
              event Object Event object.
              Inherited From:
              Deprecated:
              • since 1.14.0, use MutationObserver instead.

                coral-component:detached

                Triggered when the component is detached to the DOM.
                Callback Parameters:
                Name Type Description
                event Object Event object.
                Inherited From:
                Deprecated:
                • since 1.14.0, use MutationObserver instead.

                  coral-component:ready

                  Triggerred when the component has been upgraded and is ready for use.
                  Callback Parameters:
                  Name Type Description
                  event Object Event object.
                  Inherited From:
                  Deprecated:
                  • since 1.9.0, use Coral.commons.ready() instead.