Range slider

Capture a range

<div
   id="my-slider"
   class="env-range-slider example-range-slider env-m-bottom--xxx-large"
>
   <div class="env-range-slider__range"></div>
   <div class="env-range-slider__handle" tabindex="0"></div>
   <div class="env-range-slider__handle" tabindex="0"></div>

   <div class="env-range-slider__values">
      <span
         class="env-range-slider__values__value env-range-slider__values__value--from env-text"
      ></span>
      <span class="env-range-slider__values__separator env-text">-</span>
      <span class="env-range-slider__values__value env-text"></span>
   </div>
</div>

envision.rangeSlider('#my-slider', object);

Options

values

Type: Array
Default: [0, 0]

Values to initialize the slider with.

envision.rangeSlider('#my-slider', {
   values: [20, 70],
});

min

Type: Number
Default: 0

The minimum value of the slider.

envision.rangeSlider('#my-slider', {
   min: 100,
});

max

Type: Number
Default: 100

The maximum value of the slider.

envision.rangeSlider('#my-slider', {
   max: 200,
});

step

Type: Number
Default: 1

The size of every step between min and max. The value range (max - min) should be evenly divisible by the step.

envision.rangeSlider('#my-slider', {
   step: 5,
});

visibleValues

Type: Boolean
Default: true

If values should be visible below the handles.

envision.rangeSlider('#my-slider', {
   visibleValues: false,
});

Events

input

Triggered for every move during slide.

document.querySelector('#my-slider').addEventListener('input', (e) => {
   console.log('input', e.detail);
});

change

Triggered when slide is completed.

document.querySelector('#my-slider').addEventListener('change', (e) => {
   // Triggered when slide is completed
   console.log('change', e.detail);
});

slide Deprecated

Triggered for every move during slide. Event slide is deprecated, please use input event.

slidestop Deprecated

Triggered when slide is completed. Event slidestop is deprecated, please use change event.

Methods

values(values)

Parameters

values: An array of values to set

Set the values for the range.

envision.rangeSlider('#my-slider').then(function (sliders) {
   sliders[0].values([50, 90]);
});