Single range slider for Slgolia

single-range-slider.js

/**
 * Custom implementation of range slider, with a single slider instead of two.
 * Defaults min to 0, and allows the max to be changed using the slider.
 *
 * Implementation depends on jQuery and rangeslider (http://rangeslider.js.org/)
 * to be present.
 */

var $,
  custom_range_slider,
  instantsearch,
  search;



custom_range_slider = (function () {
  var instance_header;

  /**
   * On first render, render the header.
   *
   * For every render, this rerender the range slider to make sure it's all up
   * to date and attached well.
   *
   * @param {object} renderOpts       Data to render with
   * @param {bool}   isFirstRendering Wether or not first render
   *
   * @returns {void}
   */
  return function (renderOpts, isFirstRendering) {
    var current_value,
      rendered_input;

    if (isFirstRendering) {
      instance_header = '<div class="ais-refinement-list--header search-filte' +
      'r__head ais-header">' + renderOpts.widgetParams.templates.header + '</' +
      'div>';
    }

    try {
      current_value = search
        .helper
        .state
        .numericRefinements[
          renderOpts.widgetParams.attributeName
        ]['<='][0];
    } catch (error) {
      current_value = renderOpts.range.max;
    }

    rendered_input = '<input class="single-range-slider" type="range" min="' +
      renderOpts.range.min + '"max="' + renderOpts.range.max + '" step="1" va' +
      'lue="' + current_value + '" data-orientation="horizontal">';

    $(renderOpts.widgetParams.container)
      .html('<div class="ais-root ais-refinement-list search-filter ais-root_' +
      '_collapsible ais-root__collapsed">' + instance_header + rendered_input +
      '</div>');

    $('.single-range-slider').rangeslider({
      polyfill: false,
      onSlideEnd: function (pos, val) {
        renderOpts.refine([renderOpts.range.min, val]);
      }
    });
  };
})();

/**
 * Assigning the singleRangeSlider to the general widgets object so it can be
 * used in the filter menu logic.
 */
instantsearch.widgets.singleRangeSlider = instantsearch.connectors.connectRange(
  custom_range_slider
);