piwigo_ynh/sources/admin/themes/default/js/doubleSlider.js

(function($){

/**
 * OPTIONS:
 * values {mixed[]}
 * selected {object} min and max
 * text {string}
 */
$.fn.pwgDoubleSlider = function(options) {
  var that = this;
  
  function onChange(e, ui) {
    that.find('[data-input=min]').val(options.values[ui.values[0]]);
    that.find('[data-input=max]').val(options.values[ui.values[1]]);

    that.find('.slider-info').html(sprintf(
      options.text,
      options.values[ui.values[0]],
      options.values[ui.values[1]]
    ));
  }

  function findClosest(array, value) {
    var closest = null, index = -1;
    $.each(array, function(i, v){
      if (closest == null || Math.abs(v - value) < Math.abs(closest - value)) {
        closest = v;
        index = i;
      }
    });
    return index;
  }

  var values = [
    options.values.indexOf(options.selected.min),
    options.values.indexOf(options.selected.max)
  ];
  if (values[0] == -1) {
    values[0] = findClosest(options.values, options.selected.min);
  }
  if (values[1] == -1) {
    values[1] = findClosest(options.values, options.selected.max);
  }

  var slider = this.find('.slider-slider').slider({
    range: true,
    min: 0,
    max: options.values.length - 1,
    values: values,
    slide: onChange,
    change: onChange
  });

  this.find('.slider-choice').on('click', function(){
    slider.slider('values', 0, options.values.indexOf($(this).data('min')));
    slider.slider('values', 1, options.values.indexOf($(this).data('max')));
  });

  return this;
};

}(jQuery));