Range

API

Range

Parameters

• element HTMLElement DOM element for component instantiation and scope

• options Object (optional, default {})

  • options.rangeInputSelector String Selector for the range input (optional, default '[data-ecl-range-input]')
  • options.currentValueSelector String Selector for the current value area (optional, default '[data-ecl-range-value-current]')
  • options.attachChangeListener Boolean Whether or not to bind change events on range (optional, default true)

init

Initialise component.

destroy

Destroy component.

handleChange

Display value when changed

autoInit

Parameters

• root HTMLElement DOM element for component instantiation and scope

• $1 Object (optional, default {})

  • $1.RANGE (optional, default {})

Returns Range An instance of Range.

Setup

There are 2 ways to initialise the component.

Automatic

Add data-ecl-auto-init="Range" attribute to form group element's markup Also make sure to have the markup usng the correct data attributes

<div class="ecl-form-group" data-ecl-range data-ecl-auto-init="Range">
  ...
  <input class="ecl-range" data-ecl-range-input ... />
  ...
  <div class="ecl-range__value">
    ...
    <span class="ecl-range__value-current" data-ecl-range-value-current></span>
  </div>
</div>

Use the ECL library's autoInit() (ECL.autoInit()) when your page is ready or other custom event you want to hook onto.

Manual

Get target element, create an instance and invoke init().

Given you have 1 element with an attribute data-ecl-range on the page:

var elt = document.querySelector('[data-ecl-range]');
var range = new ECL.Range(elt);
range.init();