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]);
});

Envision documentation