Range slider

Capture a range

-
<div class="env-range-slider example-range-slider">
   <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>
$('.example-range-slider').envRangeSlider({
   values: [20, 70]
});

Options

values

Values to initialize the slider with.

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

min

The minimum value of the slider.

$('#my-slider').envRangeSlider({
   min: 100
});

max

The maximum value of the slider.

$('#my-slider').envRangeSlider({
   max: 200
});

step

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

$('#my-slider').envRangeSlider({
   step: 5
});

visibleValues

If values should be visible below the handles.

$('.my-slider').envRangeSlider({
   visibleValues: false
});

Events

slide

Triggered for every move during slide.

$('#my-slider').on('slide', function(e, data) {
   // Do something...
});

$('#my-slider').envRangeSlider({
   slide: function(e, data) {
      // Do something...
   }
});

slidestop

Triggered when slide is completed

$('#my-slider').on('slidestop', function(e, data) {
   // Do something...
});

$('#my-slider').envRangeSlider({
   slidestop: function(e, data) {
      // Do something...
   }
});

Methods

values(values)

Parameters

Set the values for the range.

$('#my-slider').envRangeSlider('values', [50, 90]);