@appbaseio/reactivesearch-vue 1.33.10 → 1.33.12

package/dist/@appbaseio/reactivesearch-vue.umd.js

@@ -5310,7 +5310,8 @@
 	  };
 	  var featuredSuggestionsActionTypes = exports.featuredSuggestionsActionTypes = {
 	    NAVIGATE: 'navigate',
-	    FUNCTION: 'function'
+	    FUNCTION: 'function',
+	    SELECT: 'select'
 	  };
 	  var queryFormatMillisecondsMap = exports.queryFormatMillisecondsMap = {
 	    minute: 60000,
@@ -6129,7 +6130,7 @@
 	              end: store.aggregations[component + '__range__internal'][componentProps.nestedField].max.value
 	            } : null;
 	          } else {
-	            rangeValue = rangeValue && store.aggregations[component + '__range__internal'].min ? {
+	            rangeValue = rangeValue && store.aggregations[component + '__range__internal'].min && store.aggregations[component + '__range__internal'].min.value ? {
 	              start: store.aggregations[component + '__range__internal'].min.value,
 	              end: store.aggregations[component + '__range__internal'].max.value
 	            } : null;
@@ -12778,12 +12779,14 @@
 	  if (str === void 0) {
 	    str = '';
 	  }
+	  var propsWhichRequirePascalCase = ['u-r-l-params'];
 	  var arr = str.split('-');
 	  var capital = arr.map(function (item, index) {
 	    return index ? item.charAt(0).toUpperCase() + item.slice(1).toLowerCase() : item;
 	  });
 	  // ^-- change here.
 	  var capitalString = capital.join('');
+	  if (propsWhichRequirePascalCase.includes(str)) capitalString = capitalString[0].toUpperCase() + capitalString.substring(1);
 	  return capitalString || '';
 	};
 	var isEmpty = function isEmpty(val) {
@@ -23718,664 +23721,728 @@
 	// Add componentType for SSR
 	TBConnected.componentType = constants_1$1.toggleButton;
 
-	/*!
-	 * vue-no-ssr v1.1.1
-	 * (c) 2018-present egoist <0x142857@gmail.com>
-	 * Released under the MIT License.
-	 */
-
-	var index$3 = {
-	  name: 'NoSsr',
-	  functional: true,
-	  props: {
-	    placeholder: String,
-	    placeholderTag: {
-	      type: String,
-	      "default": 'div'
-	    }
-	  },
-	  render: function render(h, ref) {
-	    var parent = ref.parent;
-	    var slots = ref.slots;
-	    var props = ref.props;
-	    var ref$1 = slots();
-	    var defaultSlot = ref$1["default"];
-	    if (defaultSlot === void 0) defaultSlot = [];
-	    var placeholderSlot = ref$1.placeholder;
-	    if (parent._isMounted) {
-	      return defaultSlot;
-	    }
-	    parent.$once('hook:mounted', function () {
-	      parent.$forceUpdate();
-	    });
-	    if (props.placeholderTag && (props.placeholder || placeholderSlot)) {
-	      return h(props.placeholderTag, {
-	        "class": ['no-ssr-placeholder']
-	      }, props.placeholder || placeholderSlot);
-	    }
-
-	    // Return a placeholder element for each child in the default slot
-	    // Or if no children return a single placeholder
-	    return defaultSlot.length > 0 ? defaultSlot.map(function () {
-	      return h(false);
-	    }) : h(false);
-	  }
-	};
-	var vueNoSsr_common = index$3;
-
-	var _templateObject$o;
-	var Slider = index$1('div')(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n\tmargin-top: 30px;\n\tpadding: 10px;\n\n\t/* component style */\n\t.vue-slider-disabled {\n\t\topacity: 0.5;\n\t\tcursor: not-allowed;\n\t}\n\n\t/* rail style */\n\t.vue-slider-rail {\n\t\tbackground-color: #ccc;\n\t\tborder-radius: 15px;\n\t\theight: 4px;\n\t}\n\n\t/* process style */\n\t.vue-slider-process {\n\t\tbackground-color: #0b6aff;\n\t\tborder-radius: 15px;\n\t}\n\n\t/* mark style */\n\t.vue-slider-mark {\n\t\tz-index: 4;\n\t}\n\n\t.vue-slider-mark:first-child .vue-slider-mark-step,\n\t.vue-slider-mark:last-child .vue-slider-mark-step {\n\t\tdisplay: none;\n\t}\n\n\t.vue-slider-mark-step {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tbackground-color: rgba(0, 0, 0, 0.16);\n\t}\n\n\t.vue-slider-mark-label {\n\t\tfont-size: 14px;\n\t\twhite-space: nowrap;\n\t}\n\n\t/* dot style */\n\t.vue-slider-dot {\n\t\tz-index: 2;\n\t}\n\n\t.vue-slider-dot-handle {\n\t\tcursor: pointer;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tbackground-color: #fff;\n\t\tbox-sizing: border-box;\n\t\tborder: 1px solid #9a9a9a;\n\t\tz-index: 2;\n\t\tbox-shadow: 0.5px 0.5px 2px 1px rgb(0 0 0 / 32%);\n\t}\n\n\t.vue-slider-dot-handle-disabled {\n\t\tcursor: not-allowed;\n\t\tbackground-color: #ccc;\n\t}\n\n\t.vue-slider-dot-tooltip-inner {\n\t\tfont-size: 14px;\n\t\twhite-space: nowrap;\n\t\tpadding: 2px 5px;\n\t\tmin-width: 20px;\n\t\ttext-align: center;\n\t\tcolor: #fff;\n\t\tborder-radius: 5px;\n\t\tborder: 1px solid #3498db;\n\t\tbackground-color: #3498db;\n\t\tbox-sizing: content-box;\n\t}\n\n\t.vue-slider-dot-tooltip-inner::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-top::after {\n\t\ttop: 100%;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, 0);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-top-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-bottom::after {\n\t\tbottom: 100%;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, 0);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-bottom-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-left::after {\n\t\tleft: 100%;\n\t\ttop: 50%;\n\t\ttransform: translate(0, -50%);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-left-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-right::after {\n\t\tright: 100%;\n\t\ttop: 50%;\n\t\ttransform: translate(0, -50%);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-right-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-wrapper {\n\t\topacity: 0;\n\t\ttransition: all 0.3s;\n\t}\n\t.vue-slider-dot-tooltip-wrapper-show {\n\t\topacity: 1;\n\t}\n\n\t.label-container {\n\t\tmargin: 10px 0;\n\t\twidth: 100%;\n\t}\n\n\t.range-label-right {\n\t\tfloat: right;\n\t}\n"])));
-
-	/**
-	 * Caution: Please do not change this file without having a discussion with the Team.
-	 * Any change may break the umd build, we're directly replacing the line no: 14
-	 * `
-						var s = document.createElement("script");
-						s.setAttribute("src","https://cdn.jsdelivr.net/npm/vue-slider-component@3.2.15/dist/vue-slider-component.umd.min.js");
-						s.onload = function(){
-							var VueSlider = global['vue-slider-component'];
-							components['vue-slider-component'] = VueSlider;
-						}
-						document.head.appendChild(s);
-					` in rollup umd build process with some script.
-	 */
-	// eslint-disable-next-line
-	var getComponents = function getComponents() {
-	  var components = {
-	    NoSSR: vueNoSsr_common
-	  };
-	  {
-	    try {
-	      // in older versions of nuxt, it's process.BROWSER_BUILD
-	      // eslint-disable-next-line
-	      
-						var s = document.createElement("script");
-						s.setAttribute("src","https://cdn.jsdelivr.net/npm/vue-slider-component@3.2.15/dist/vue-slider-component.umd.min.js");
-						s.onload = function(){
-							var VueSlider = global$1['vue-slider-component'];
-							components['vue-slider-component'] = VueSlider;
-						};
-						document.head.appendChild(s);
-					
-	    } catch (e) {
-	      console.error('Unable to load vue-slider', e);
-	    }
-	  }
-	  return components;
-	};
-
-	var addComponent$1 = lib_5.addComponent,
-	  removeComponent$1 = lib_5.removeComponent,
-	  watchComponent$1 = lib_5.watchComponent,
-	  updateQuery$8 = lib_5.updateQuery,
-	  setQueryListener$1 = lib_5.setQueryListener,
+	var _excluded = ["options"];
+	var updateQuery$8 = lib_5.updateQuery,
 	  setQueryOptions$7 = lib_5.setQueryOptions,
-	  setComponentProps$1 = lib_5.setComponentProps,
 	  setCustomQuery$7 = lib_5.setCustomQuery,
-	  updateComponentProps$2 = lib_5.updateComponentProps;
-	var checkValueChange$7 = lib_8.checkValueChange,
-	  getClassName$b = lib_8.getClassName,
+	  setDefaultQuery$7 = lib_5.setDefaultQuery;
+	var parseHits$1 = lib_8.parseHits,
 	  isEqual$b = lib_8.isEqual,
-	  checkSomePropChange$1 = lib_8.checkSomePropChange,
+	  getCompositeAggsQuery$5 = lib_8.getCompositeAggsQuery,
+	  getResultStats$3 = lib_8.getResultStats,
 	  extractQueryFromCustomQuery$6 = lib_8.extractQueryFromCustomQuery,
 	  getOptionsForCustomQuery$6 = lib_8.getOptionsForCustomQuery;
-	var DynamicRangeSlider = {
-	  name: 'DynamicRangeSlider',
-	  components: getComponents(),
+	var ReactiveComponent = {
+	  name: 'ReactiveComponent',
 	  props: {
-	    beforeValueChange: types.func,
-	    className: VueTypes.string.def(''),
-	    rangeLabels: types.func,
 	    componentId: types.stringRequired,
+	    aggregationField: types.string,
+	    aggregationSize: VueTypes.number,
+	    size: VueTypes.number,
+	    defaultQuery: types.func,
 	    customQuery: types.func,
-	    data: types.data,
-	    dataField: types.stringRequired,
-	    defaultValue: types.func,
 	    filterLabel: types.string,
-	    innerClass: types.style,
 	    react: types.react,
 	    showFilter: VueTypes.bool.def(true),
-	    destroyOnUnmount: VueTypes.bool,
-	    showCheckbox: VueTypes.bool.def(true),
-	    title: types.title,
 	    URLParams: VueTypes.bool.def(false),
-	    sliderOptions: VueTypes.object.def({}),
-	    nestedField: types.string,
+	    distinctField: types.string,
+	    distinctFieldConfig: types.props,
 	    index: VueTypes.string,
-	    value: types.range,
 	    endpoint: types.endpointConfig
 	  },
-	  data: function data() {
-	    this.internalRangeComponent = this.$props.componentId + "__range__internal";
-	    return {
-	      currentValue: null,
-	      stats: []
-	    };
-	  },
 	  created: function created() {
 	    var _this = this;
-	    this.$timestamp = new Date().getTime();
-	    var onQueryChange = function onQueryChange() {
-	      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-	        args[_key] = arguments[_key];
-	      }
-	      _this.$emit.apply(_this, ['queryChange'].concat(args));
-	      _this.$emit.apply(_this, ['query-change'].concat(args));
-	    };
-	    this.setQueryListener(this.$props.componentId, onQueryChange, null);
-	    // Update props in store
-	    this.setComponentProps(this.componentId, this.$props, constants_1$1.dynamicRangeSlider);
-	    this.setComponentProps(this.internalRangeComponent, this.$props, constants_1$1.dynamicRangeSlider);
-	    if (!this.enableAppbase && this.$props.index) {
-	      console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
-	    }
+	    var props = this.$props;
+	    this.internalComponent = null;
+	    this.$defaultQuery = null;
 	    // Set custom query in store
-	    updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
-	  },
-	  mounted: function mounted() {
-	    this.setReact();
-	  },
-	  beforeMount: function beforeMount() {
-	    var components = [];
-	    if (this.$$store) {
-	      var _this$$$store$getStat = this.$$store.getState();
-	      components = _this$$$store$getStat.components;
+	    updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.selectedValue);
+	    var customQuery = props.customQuery,
+	      componentId = props.componentId,
+	      filterLabel = props.filterLabel,
+	      showFilter = props.showFilter,
+	      URLParams = props.URLParams,
+	      distinctField = props.distinctField,
+	      distinctFieldConfig = props.distinctFieldConfig,
+	      index = props.index;
+	    if (this.enableAppbase && this.aggregationField && this.aggregationField !== '') {
+	      console.warn('Warning(ReactiveSearch): The `aggregationField` prop has been marked as deprecated, please use the `distinctField` prop instead.');
 	    }
-	    var value = this.$props.value;
-	    if (this.destroyOnUnmount || components.indexOf(this.componentId) === -1) {
-	      this.addComponent(this.componentId, this.$timestamp);
-	      this.addComponent(this.internalRangeComponent, this.$timestamp);
-	      if (Array.isArray(this.selectedValue)) {
-	        this.handleChange(this.selectedValue);
-	      } else if (this.selectedValue) {
-	        this.handleChange(DynamicRangeSlider.parseValue(this.selectedValue, this.$props));
-	      } else if (value) {
-	        this.handleChange(DynamicRangeSlider.parseValue(value, this.$props));
-	      }
-
-	      // get range before executing other queries
-	      this.updateRangeQueryOptions();
+	    if (!this.enableAppbase && (distinctField || distinctFieldConfig)) {
+	      console.warn('Warning(ReactiveSearch): In order to use the `distinctField` and `distinctFieldConfig` props, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
 	    }
-	  },
-	  beforeUpdate: function beforeUpdate() {
-	    if (!this.currentValue) {
-	      this.setDefaultValue(this.range);
+	    if (!this.enableAppbase && index) {
+	      console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
 	    }
-	  },
-	  beforeDestroy: function beforeDestroy() {
-	    if (this.destroyOnUnmount) {
-	      this.removeComponent(this.$props.componentId);
-	      this.removeComponent(this.internalRangeComponent);
+	    if (customQuery) {
+	      var calcCustomQuery = customQuery(this.selectedValue, props);
+	      var query = extractQueryFromCustomQuery$6(calcCustomQuery);
+	      var customQueryOptions = calcCustomQuery ? getOptionsForCustomQuery$6(calcCustomQuery) : null;
+	      if (customQueryOptions) {
+	        this.setQueryOptions(componentId, _extends({}, customQueryOptions, this.getAggsQuery()), false);
+	      } else this.setQueryOptions(componentId, this.getAggsQuery(), false);
+	      this.updateQuery({
+	        componentId: componentId,
+	        query: query,
+	        value: this.selectedValue || null,
+	        label: filterLabel,
+	        showFilter: showFilter,
+	        URLParams: URLParams
+	      });
 	    }
-	  },
-	  methods: {
-	    isControlled: function isControlled() {
-	      if (this.$props.value && this.$listeners) {
-	        return true;
+	    this.setQuery = function (_ref) {
+	      var options = _ref.options,
+	        obj = _objectWithoutPropertiesLoose(_ref, _excluded);
+	      var queryToBeSet = obj.query;
+
+	      // when enableAppbase is true, Backend throws error because of repeated query in request body
+	      if (queryToBeSet && queryToBeSet.query) {
+	        queryToBeSet = queryToBeSet.query;
 	      }
-	      return false;
-	    },
-	    setDefaultValue: function setDefaultValue(_ref) {
-	      var start = _ref.start,
-	        end = _ref.end;
-	      if (this.$props.defaultValue) {
-	        var _this$$props$defaultV = this.$props.defaultValue(start, end),
-	          defaultStart = _this$$props$defaultV.start,
-	          defaultEnd = _this$$props$defaultV.end;
-	        this.handleChange([defaultStart, defaultEnd]);
-	      } else if (this.isControlled()) {
-	        this.handleChange(DynamicRangeSlider.parseValue(this.$props.value), 'change');
-	      } else {
-	        this.currentValue = [start, end];
+	      var customQueryCalc = _extends({}, options, {
+	        query: queryToBeSet
+	      });
+	      var rsAPIQuery = customQueryCalc;
+	      // handle stored queries
+	      if (queryToBeSet && queryToBeSet.id) {
+	        rsAPIQuery = queryToBeSet;
 	      }
-	    },
-	    setReact: function setReact() {
-	      if (this.$props.react) {
-	        this.watchComponent(this.internalRangeComponent, this.$props.react);
-	        this.watchComponent(this.$props.componentId, this.$props.react);
-	      } else {
-	        this.watchComponent(this.internalRangeComponent, {});
-	        this.watchComponent(this.$props.componentId, {});
+	      // Update customQuery field for RS API
+	      _this.setCustomQuery(props.componentId, rsAPIQuery);
+	      if (options) {
+	        _this.setQueryOptions(props.componentId, _extends({}, _this.getAggsQuery(), options), false);
 	      }
-	    },
-	    rangeQuery: function rangeQuery() {
-	      return {
-	        min: {
-	          min: {
-	            field: this.$props.dataField
-	          }
-	        },
-	        max: {
-	          max: {
-	            field: this.$props.dataField
-	          }
-	        }
-	      };
-	    },
-	    updateRangeQueryOptions: function updateRangeQueryOptions() {
-	      var aggs = {};
-	      if (this.$props.nestedField) {
-	        var _aggs;
-	        aggs = (_aggs = {}, _aggs[this.$props.nestedField] = {
-	          nested: {
-	            path: this.$props.nestedField
-	          },
-	          aggs: this.rangeQuery()
-	        }, _aggs);
-	      } else {
-	        aggs = this.rangeQuery();
-	      }
-	      this.setQueryOptions(this.internalRangeComponent, {
-	        aggs: aggs
-	      });
-	    },
-	    handleSlider: function handleSlider() {
-	      var sliderValues = this.$refs.slider.getValue();
-	      var value = this.$props.value;
-	      if (value === undefined) {
-	        this.handleChange(sliderValues);
-	      } else {
-	        this.$emit('change', {
-	          start: sliderValues[0],
-	          end: sliderValues[1]
-	        });
-	      }
-	    },
-	    handleChange: function handleChange(currentValue) {
-	      var _this2 = this;
-	      // Always keep the values within range
-	      var normalizedValue = [this.range ? Math.max(this.range.start, currentValue[0]) : currentValue[0], this.range ? Math.min(this.range.end, currentValue[1]) : currentValue[1]];
-	      var performUpdate = function performUpdate() {
-	        _this2.currentValue = normalizedValue;
-	        _this2.updateQueryHandler(normalizedValue, _this2.$props);
-	        _this2.$emit('valueChange', {
-	          start: normalizedValue[0],
-	          end: normalizedValue[1]
-	        });
-	        _this2.$emit('value-change', {
-	          start: normalizedValue[0],
-	          end: normalizedValue[1]
-	        });
-	      };
-	      checkValueChange$7(this.$props.componentId, {
-	        start: normalizedValue[0],
-	        end: normalizedValue[1]
-	      }, this.$props.beforeValueChange, performUpdate);
-	    },
-	    updateQueryHandler: function updateQueryHandler(value) {
-	      var query = DynamicRangeSlider.defaultQuery(value, this.$props);
-	      if (this.$props.customQuery) {
-	        var customQueryTobeSet = this.$props.customQuery(value, this.$props);
-	        var queryTobeSet = extractQueryFromCustomQuery$6(customQueryTobeSet);
-	        if (queryTobeSet) {
-	          query = queryTobeSet;
-	        }
-	        var customQueryOptions = getOptionsForCustomQuery$6(customQueryTobeSet);
-	        updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, value);
-	        this.setQueryOptions(this.$props.componentId, customQueryOptions, false);
-	      }
-	      var _ref2 = this.range || {
-	          start: value[0],
-	          end: value[1]
-	        },
-	        start = _ref2.start,
-	        end = _ref2.end;
-	      var currentStart = value[0],
-	        currentEnd = value[1];
-	      // check if the slider is at its initial position
-	      var isInitialValue = currentStart === start && currentEnd === end;
+	      _this.updateQuery(_extends({}, obj, {
+	        query: customQueryCalc.query,
+	        componentId: props.componentId,
+	        label: props.filterLabel,
+	        showFilter: props.showFilter,
+	        URLParams: props.URLParams
+	      }));
+	    };
+	    if (props.defaultQuery) {
+	      this.internalComponent = props.componentId + "__internal";
+	    }
+	    if (this.internalComponent && this.$props.defaultQuery) {
+	      updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.selectedValue);
+	      this.$defaultQuery = this.$props.defaultQuery(this.selectedValue, this.$props);
+	      var _query = extractQueryFromCustomQuery$6(this.$defaultQuery);
+	      var queryOptions = getOptionsForCustomQuery$6(this.$defaultQuery);
+	      if (queryOptions) {
+	        this.setQueryOptions(this.internalComponent, _extends({}, queryOptions, this.getAggsQuery()), false);
+	      } else this.setQueryOptions(this.internalComponent, this.getAggsQuery(), false);
 	      this.updateQuery({
-	        componentId: this.$props.componentId,
-	        query: query,
-	        value: value,
-	        label: this.$props.filterLabel,
-	        showFilter: this.$props.showFilter && !isInitialValue,
-	        URLParams: this.$props.URLParams,
-	        componentType: constants_1$1.dynamicRangeSlider
+	        componentId: this.internalComponent,
+	        query: _query
 	      });
 	    }
 	  },
-	  computed: {
-	    labels: function labels() {
-	      if (!this.rangeLabels) return null;
-	      return this.rangeLabels(this.range.start, this.range.end);
-	    }
-	  },
 	  watch: {
-	    $props: {
-	      deep: true,
-	      handler: function handler(newVal) {
-	        var _this3 = this;
-	        var propsKeys = getValidPropsKeys(newVal);
-	        checkSomePropChange$1(newVal, this.componentProps, propsKeys, function () {
-	          _this3.updateComponentProps(_this3.componentId, newVal, constants_1$1.dynamicRangeSlider);
-	          _this3.updateComponentProps(_this3.internalRangeComponent, newVal, constants_1$1.dynamicRangeSlider);
-	        });
+	    hits: function hits(newVal, oldVal) {
+	      if (!isEqual$b(newVal, oldVal)) {
+	        this.$emit('data', this.getData());
 	      }
 	    },
-	    react: function react() {
-	      this.setReact();
+	    rawData: function rawData(newVal, oldVal) {
+	      if (!isEqual$b(newVal, oldVal)) {
+	        this.$emit('data', this.getData());
+	      }
 	    },
-	    selectedValue: function selectedValue(newValue) {
-	      if (isEqual$b(newValue, this.currentValue)) return;
-	      var value = newValue || {
-	        start: this.range.start,
-	        end: this.range.end
-	      };
-	      this.$emit('change', value);
-	      this.handleChange(DynamicRangeSlider.parseValue(value, this.$props));
+	    aggregations: function aggregations(newVal, oldVal) {
+	      if (!isEqual$b(newVal, oldVal)) {
+	        this.$emit('data', this.getData());
+	      }
 	    },
-	    range: function range(newValue, oldValue) {
-	      if (isEqual$b(newValue, oldValue) || !this.currentValue) return;
-	      var _ref3 = this.currentValue || [],
-	        currentStart = _ref3[0],
-	        currentEnd = _ref3[1];
-	      var _ref4 = oldValue || {},
-	        oldStart = _ref4.start,
-	        oldEnd = _ref4.end;
-	      var newStart = currentStart === oldStart ? newValue.start : currentStart;
-	      var newEnd = currentEnd === oldEnd ? newValue.end : currentEnd;
-	      this.handleChange([newStart, newEnd]);
+	    aggregationData: function aggregationData(newVal, oldVal) {
+	      if (!isEqual$b(newVal, oldVal)) {
+	        this.$emit('data', this.getData());
+	      }
 	    },
-	    customQuery: function customQuery(newVal, oldVal) {
-	      if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
-	        this.updateQueryHandler(this.$data.currentValue);
+	    promotedResults: function promotedResults(newVal, oldVal) {
+	      if (!isEqual$b(newVal, oldVal)) {
+	        this.$emit('data', this.getData());
 	      }
 	    },
-	    value: function value(newVal, oldVal) {
+	    hidden: function hidden(newVal, oldVal) {
 	      if (!isEqual$b(newVal, oldVal)) {
-	        this.handleChange(DynamicRangeSlider.parseValue(newVal, this.$props));
+	        this.$emit('data', this.getData());
+	      }
+	    },
+	    total: function total(newVal, oldVal) {
+	      if (!isEqual$b(newVal, oldVal)) {
+	        this.$emit('data', this.getData());
+	      }
+	    },
+	    time: function time(newVal, oldVal) {
+	      if (!isEqual$b(newVal, oldVal)) {
+	        this.$emit('data', this.getData());
+	      }
+	    },
+	    defaultQuery: function defaultQuery(newVal, oldVal) {
+	      if (newVal && !isQueryIdentical(newVal, oldVal, this.selectedValue, this.$props)) {
+	        this.$defaultQuery = newVal(this.selectedValue, this.$props);
+	        var query = extractQueryFromCustomQuery$6(this.$defaultQuery);
+	        var queryOptions = getOptionsForCustomQuery$6(this.$defaultQuery);
+	        if (queryOptions) {
+	          this.setQueryOptions(this.internalComponent, _extends({}, queryOptions, this.getAggsQuery()), false);
+	        } else this.setQueryOptions(this.internalComponent, this.getAggsQuery(), false);
+	        // Update default query for RS API
+	        updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.selectedValue);
+	        this.updateQuery({
+	          componentId: this.internalComponent,
+	          query: query
+	        });
+	      }
+	    },
+	    customQuery: function customQuery(newVal, oldVal) {
+	      if (newVal && !isQueryIdentical(newVal, oldVal, this.selectedValue, this.$props)) {
+	        var componentId = this.$props.componentId;
+	        this.$customQuery = newVal(this.selectedValue, this.$props);
+	        var query = extractQueryFromCustomQuery$6(this.$customQuery);
+	        var queryOptions = getOptionsForCustomQuery$6(this.$customQuery);
+	        if (queryOptions) {
+	          this.setQueryOptions(componentId, _extends({}, queryOptions, this.getAggsQuery()), false);
+	        } else this.setQueryOptions(componentId, this.getAggsQuery(), false);
+
+	        // Update custom query for RS API
+	        updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.selectedValue);
+	        this.updateQuery({
+	          componentId: componentId,
+	          query: query
+	        });
 	      }
 	    }
 	  },
 	  render: function render() {
 	    var h = arguments[0];
-	    if (!this.range || !this.currentValue) {
+	    try {
+	      var dom = this.$scopedSlots["default"];
+	      var error = this.error,
+	        isLoading = this.isLoading,
+	        selectedValue = this.selectedValue;
+	      var propsToBePassed = _extends({
+	        error: error,
+	        loading: isLoading
+	      }, this.getData(), {
+	        value: selectedValue,
+	        setQuery: this.setQuery
+	      });
+	      return h("div", [dom(propsToBePassed)]);
+	    } catch (e) {
 	      return null;
 	    }
-	    var _this$range = this.range,
-	      start = _this$range.start,
-	      end = _this$range.end;
-	    return h(Container, {
-	      "class": this.$props.className
-	    }, [this.$props.title && h(Title, {
-	      "class": getClassName$b(this.$props.innerClass, 'title')
-	    }, [this.$props.title]), h(vueNoSsr_common, [h(Slider, {
-	      "class": getClassName$b(this.$props.innerClass, 'slider')
-	    }, [h("vue-slider-component", {
-	      "ref": "slider",
-	      "attrs": {
-	        "value": [Math.floor(Math.max(start, this.currentValue[0])), Math.ceil(Math.min(end, this.currentValue[1]))],
-	        "min": Math.floor(Math.min(start, this.currentValue[0])),
-	        "max": Math.ceil(Math.max(end, this.currentValue[1])),
-	        "dotSize": 20,
-	        "height": 4,
-	        "enable-cross": false,
-	        "tooltip": "always"
-	      },
-	      "on": {
-	        "drag-end": this.handleSlider
-	      },
-	      "props": _extends({}, this.$props.sliderOptions)
-	    }), this.labels ? h("div", {
-	      "class": "label-container"
-	    }, [h("label", {
-	      "class": getClassName$b(this.$props.innerClass, 'label') || 'range-label-left'
-	    }, [this.labels.start]), h("label", {
-	      "class": getClassName$b(this.$props.innerClass, 'label') || 'range-label-right'
-	    }, [this.labels.end])]) : null])])]);
-	  }
-	};
-	DynamicRangeSlider.defaultQuery = function (values, props) {
-	  var query = null;
-	  if (Array.isArray(values) && values.length) {
-	    var _range;
-	    query = {
-	      range: (_range = {}, _range[props.dataField] = {
-	        gte: values[0],
-	        lte: values[1],
-	        boost: 2.0
-	      }, _range)
-	    };
-	  }
-	  if (query && props.nestedField) {
-	    return {
-	      query: {
-	        nested: {
-	          path: props.nestedField,
-	          query: query
+	  },
+	  methods: {
+	    getAggsQuery: function getAggsQuery() {
+	      if (this.aggregationField) {
+	        return {
+	          aggs: getCompositeAggsQuery$5({
+	            props: this.$props,
+	            showTopHits: true,
+	            value: this.selectedValue
+	          }).aggs
+	        };
+	      }
+	      return {};
+	    },
+	    getData: function getData() {
+	      var hits = this.hits,
+	        aggregations = this.aggregations,
+	        aggregationData = this.aggregationData,
+	        promotedResults = this.promotedResults,
+	        rawData = this.rawData;
+	      var filteredResults = parseHits$1(hits);
+	      if (promotedResults.length) {
+	        var ids = promotedResults.map(function (item) {
+	          return item._id;
+	        }).filter(Boolean);
+	        if (ids) {
+	          filteredResults = filteredResults.filter(function (item) {
+	            return !ids.includes(item._id);
+	          });
 	        }
+	        filteredResults = [].concat(promotedResults, filteredResults);
 	      }
-	    };
-	  }
-	  return query;
-	};
-	DynamicRangeSlider.parseValue = function (value) {
-	  if (value) {
-	    return Array.isArray(value) ? value : [value.start, value.end];
+	      return {
+	        data: filteredResults,
+	        aggregationData: aggregationData,
+	        rawData: rawData,
+	        aggregations: aggregations,
+	        promotedData: promotedResults,
+	        resultStats: this.stats
+	      };
+	    }
+	  },
+	  computed: {
+	    stats: function stats() {
+	      return getResultStats$3(this);
+	    }
 	  }
-	  return [];
 	};
-	DynamicRangeSlider.hasInternalComponent = function () {
-	  return true;
+	ReactiveComponent.hasInternalComponent = function (props) {
+	  return !!props.defaultQuery;
 	};
 	var mapStateToProps$a = function mapStateToProps(state, props) {
-	  var componentId = state.aggregations[props.componentId];
-	  var internalRange = state.aggregations[props.componentId + "__range__internal"];
-	  var options = componentId && componentId[props.dataField];
-	  var range = state.aggregations[props.componentId + "__range__internal"];
-	  if (props.nestedField) {
-	    options = options && componentId[props.dataField][props.nestedField] && componentId[props.dataField][props.nestedField].buckets ? componentId[props.dataField][props.nestedField].buckets : [];
-	    range = range && internalRange[props.nestedField].min ? {
-	      start: internalRange[props.nestedField].min.value,
-	      end: internalRange[props.nestedField].max.value
-	    } : null;
-	  } else {
-	    options = options && componentId[props.dataField].buckets ? componentId[props.dataField].buckets : [];
-	    range = range && internalRange.min ? {
-	      start: internalRange.min.value,
-	      end: internalRange.max.value
-	    } : null;
-	  }
 	  return {
-	    options: options,
-	    range: range,
-	    selectedValue: state.selectedValues[props.componentId] ? state.selectedValues[props.componentId].value : null,
+	    aggregations: state.aggregations[props.componentId] && state.aggregations[props.componentId] || null,
+	    aggregationData: state.compositeAggregations[props.componentId] || [],
+	    hits: state.hits[props.componentId] && state.hits[props.componentId].hits || [],
+	    rawData: state.rawData[props.componentId],
+	    error: state.error[props.componentId],
+	    isLoading: state.isLoading[props.componentId],
+	    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
+	    promotedResults: state.promotedResults[props.componentId] || [],
+	    time: state.hits[props.componentId] && state.hits[props.componentId].time || 0,
+	    total: state.hits[props.componentId] && state.hits[props.componentId].total,
+	    hidden: state.hits[props.componentId] && state.hits[props.componentId].hidden,
 	    componentProps: state.props[props.componentId],
 	    enableAppbase: state.config.enableAppbase
 	  };
 	};
 	var mapDispatchtoProps$7 = {
-	  addComponent: addComponent$1,
-	  removeComponent: removeComponent$1,
-	  updateQuery: updateQuery$8,
-	  watchComponent: watchComponent$1,
-	  setQueryListener: setQueryListener$1,
 	  setQueryOptions: setQueryOptions$7,
-	  setComponentProps: setComponentProps$1,
+	  updateQuery: updateQuery$8,
 	  setCustomQuery: setCustomQuery$7,
-	  updateComponentProps: updateComponentProps$2
+	  setDefaultQuery: setDefaultQuery$7
 	};
-	var RangeConnected = PreferencesConsumer(connect(mapStateToProps$a, mapDispatchtoProps$7)(DynamicRangeSlider));
-	RangeConnected.defaultQuery = DynamicRangeSlider.defaultQuery;
-	RangeConnected.parseValue = DynamicRangeSlider.parseValue;
-	RangeConnected.hasInternalComponent = DynamicRangeSlider.hasInternalComponent;
-	RangeConnected.name = DynamicRangeSlider.name;
-
+	var ConnectedComponent = ComponentWrapper$1(connect(mapStateToProps$a, mapDispatchtoProps$7)(ReactiveComponent), {
+	  componentType: constants_1$1.reactiveComponent
+	});
+	var RcConnected = PreferencesConsumer({
+	  name: 'RcConnected',
+	  render: function render(h) {
+	    return h(ConnectedComponent, {
+	      attrs: this.$attrs,
+	      on: this.$listeners,
+	      scopedSlots: this.$scopedSlots,
+	      slots: this.$slots
+	    });
+	  }
+	});
+	RcConnected.name = ReactiveComponent.name;
+	RcConnected.hasInternalComponent = ReactiveComponent.hasInternalComponent;
 	// Add componentType for SSR
-	RangeConnected.componentType = constants_1$1.dynamicRangeSlider;
-	RangeConnected.install = function (Vue) {
-	  Vue.component(RangeConnected.name, RangeConnected);
+	RcConnected.componentType = constants_1$1.reactiveComponent;
+	RcConnected.install = function (Vue) {
+	  Vue.component(RcConnected.name, RcConnected);
 	};
 
-	var updateQuery$9 = lib_5.updateQuery,
-	  setQueryOptions$8 = lib_5.setQueryOptions,
-	  setCustomQuery$8 = lib_5.setCustomQuery;
-	var isEqual$c = lib_8.isEqual,
-	  checkValueChange$8 = lib_8.checkValueChange,
-	  getClassName$c = lib_8.getClassName,
-	  getOptionsFromQuery$1 = lib_8.getOptionsFromQuery;
-	var SingleRange = {
-	  name: 'SingleRange',
-	  data: function data() {
-	    this.__state = {
-	      currentValue: null
-	    };
-	    this.type = 'range';
-	    return this.__state;
+	/*!
+	 * vue-no-ssr v1.1.1
+	 * (c) 2018-present egoist <0x142857@gmail.com>
+	 * Released under the MIT License.
+	 */
+
+	var index$3 = {
+	  name: 'NoSsr',
+	  functional: true,
+	  props: {
+	    placeholder: String,
+	    placeholderTag: {
+	      type: String,
+	      "default": 'div'
+	    }
 	  },
+	  render: function render(h, ref) {
+	    var parent = ref.parent;
+	    var slots = ref.slots;
+	    var props = ref.props;
+	    var ref$1 = slots();
+	    var defaultSlot = ref$1["default"];
+	    if (defaultSlot === void 0) defaultSlot = [];
+	    var placeholderSlot = ref$1.placeholder;
+	    if (parent._isMounted) {
+	      return defaultSlot;
+	    }
+	    parent.$once('hook:mounted', function () {
+	      parent.$forceUpdate();
+	    });
+	    if (props.placeholderTag && (props.placeholder || placeholderSlot)) {
+	      return h(props.placeholderTag, {
+	        "class": ['no-ssr-placeholder']
+	      }, props.placeholder || placeholderSlot);
+	    }
+
+	    // Return a placeholder element for each child in the default slot
+	    // Or if no children return a single placeholder
+	    return defaultSlot.length > 0 ? defaultSlot.map(function () {
+	      return h(false);
+	    }) : h(false);
+	  }
+	};
+	var vueNoSsr_common = index$3;
+
+	var _templateObject$o;
+	var Slider = index$1('div')(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n\tmargin-top: 30px;\n\tpadding: 10px;\n\n\t/* component style */\n\t.vue-slider-disabled {\n\t\topacity: 0.5;\n\t\tcursor: not-allowed;\n\t}\n\n\t/* rail style */\n\t.vue-slider-rail {\n\t\tbackground-color: #ccc;\n\t\tborder-radius: 15px;\n\t\theight: 4px;\n\t}\n\n\t/* process style */\n\t.vue-slider-process {\n\t\tbackground-color: #0b6aff;\n\t\tborder-radius: 15px;\n\t}\n\n\t/* mark style */\n\t.vue-slider-mark {\n\t\tz-index: 4;\n\t}\n\n\t.vue-slider-mark:first-child .vue-slider-mark-step,\n\t.vue-slider-mark:last-child .vue-slider-mark-step {\n\t\tdisplay: none;\n\t}\n\n\t.vue-slider-mark-step {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tbackground-color: rgba(0, 0, 0, 0.16);\n\t}\n\n\t.vue-slider-mark-label {\n\t\tfont-size: 14px;\n\t\twhite-space: nowrap;\n\t}\n\n\t/* dot style */\n\t.vue-slider-dot {\n\t\tz-index: 2;\n\t}\n\n\t.vue-slider-dot-handle {\n\t\tcursor: pointer;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tbackground-color: #fff;\n\t\tbox-sizing: border-box;\n\t\tborder: 1px solid #9a9a9a;\n\t\tz-index: 2;\n\t\tbox-shadow: 0.5px 0.5px 2px 1px rgb(0 0 0 / 32%);\n\t}\n\n\t.vue-slider-dot-handle-disabled {\n\t\tcursor: not-allowed;\n\t\tbackground-color: #ccc;\n\t}\n\n\t.vue-slider-dot-tooltip-inner {\n\t\tfont-size: 14px;\n\t\twhite-space: nowrap;\n\t\tpadding: 2px 5px;\n\t\tmin-width: 20px;\n\t\ttext-align: center;\n\t\tcolor: #fff;\n\t\tborder-radius: 5px;\n\t\tborder: 1px solid #3498db;\n\t\tbackground-color: #3498db;\n\t\tbox-sizing: content-box;\n\t}\n\n\t.vue-slider-dot-tooltip-inner::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-top::after {\n\t\ttop: 100%;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, 0);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-top-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-bottom::after {\n\t\tbottom: 100%;\n\t\tleft: 50%;\n\t\ttransform: translate(-50%, 0);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-bottom-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-left::after {\n\t\tleft: 100%;\n\t\ttop: 50%;\n\t\ttransform: translate(0, -50%);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-left-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-inner-right::after {\n\t\tright: 100%;\n\t\ttop: 50%;\n\t\ttransform: translate(0, -50%);\n\t\theight: 0;\n\t\twidth: 0;\n\t\tborder-color: transparent;\n\t\tborder-style: solid;\n\t\tborder-width: 5px;\n\t\tborder-right-color: inherit;\n\t}\n\n\t.vue-slider-dot-tooltip-wrapper {\n\t\topacity: 0;\n\t\ttransition: all 0.3s;\n\t}\n\t.vue-slider-dot-tooltip-wrapper-show {\n\t\topacity: 1;\n\t}\n\n\t.label-container {\n\t\tmargin: 10px 0;\n\t\twidth: 100%;\n\t}\n\n\t.range-label-right {\n\t\tfloat: right;\n\t}\n"])));
+
+	/**
+	 * Caution: Please do not change this file without having a discussion with the Team.
+	 * Any change may break the umd build, we're directly replacing the line no: 14
+	 * `
+						var s = document.createElement("script");
+						s.setAttribute("src","https://cdn.jsdelivr.net/npm/vue-slider-component@3.2.15/dist/vue-slider-component.umd.min.js");
+						s.onload = function(){
+							var VueSlider = global['vue-slider-component'];
+							components['vue-slider-component'] = VueSlider;
+						}
+						document.head.appendChild(s);
+					` in rollup umd build process with some script.
+	 */
+	// eslint-disable-next-line
+	var getComponents = function getComponents() {
+	  var components = {
+	    NoSSR: vueNoSsr_common
+	  };
+	  {
+	    try {
+	      // in older versions of nuxt, it's process.BROWSER_BUILD
+	      // eslint-disable-next-line
+	      
+						var s = document.createElement("script");
+						s.setAttribute("src","https://cdn.jsdelivr.net/npm/vue-slider-component@3.2.15/dist/vue-slider-component.umd.min.js");
+						s.onload = function(){
+							var VueSlider = global$1['vue-slider-component'];
+							components['vue-slider-component'] = VueSlider;
+						};
+						document.head.appendChild(s);
+					
+	    } catch (e) {
+	      console.error('Unable to load vue-slider', e);
+	    }
+	  }
+	  return components;
+	};
+
+	var addComponent$1 = lib_5.addComponent,
+	  removeComponent$1 = lib_5.removeComponent,
+	  watchComponent$1 = lib_5.watchComponent,
+	  updateQuery$9 = lib_5.updateQuery,
+	  setQueryListener$1 = lib_5.setQueryListener,
+	  setQueryOptions$8 = lib_5.setQueryOptions,
+	  setComponentProps$1 = lib_5.setComponentProps,
+	  setCustomQuery$8 = lib_5.setCustomQuery,
+	  updateComponentProps$2 = lib_5.updateComponentProps;
+	var checkValueChange$7 = lib_8.checkValueChange,
+	  getClassName$b = lib_8.getClassName,
+	  isEqual$c = lib_8.isEqual,
+	  checkSomePropChange$1 = lib_8.checkSomePropChange,
+	  extractQueryFromCustomQuery$7 = lib_8.extractQueryFromCustomQuery,
+	  getOptionsForCustomQuery$7 = lib_8.getOptionsForCustomQuery;
+	var DynamicRangeSlider = {
+	  name: 'DynamicRangeSlider',
+	  components: getComponents(),
 	  props: {
 	    beforeValueChange: types.func,
 	    className: VueTypes.string.def(''),
+	    rangeLabels: types.func,
 	    componentId: types.stringRequired,
 	    customQuery: types.func,
 	    data: types.data,
 	    dataField: types.stringRequired,
-	    defaultValue: types.string,
-	    value: types.value,
+	    defaultValue: types.func,
 	    filterLabel: types.string,
 	    innerClass: types.style,
 	    react: types.react,
 	    showFilter: VueTypes.bool.def(true),
-	    showRadio: VueTypes.bool.def(true),
+	    destroyOnUnmount: VueTypes.bool,
+	    showCheckbox: VueTypes.bool.def(true),
 	    title: types.title,
 	    URLParams: VueTypes.bool.def(false),
+	    sliderOptions: VueTypes.object.def({}),
 	    nestedField: types.string,
 	    index: VueTypes.string,
+	    value: types.range,
 	    endpoint: types.endpointConfig
 	  },
+	  data: function data() {
+	    this.internalRangeComponent = this.$props.componentId + "__range__internal";
+	    return {
+	      currentValue: null,
+	      stats: []
+	    };
+	  },
 	  created: function created() {
+	    var _this = this;
+	    this.$timestamp = new Date().getTime();
+	    var onQueryChange = function onQueryChange() {
+	      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+	        args[_key] = arguments[_key];
+	      }
+	      _this.$emit.apply(_this, ['queryChange'].concat(args));
+	      _this.$emit.apply(_this, ['query-change'].concat(args));
+	    };
+	    this.setQueryListener(this.$props.componentId, onQueryChange, null);
+	    // Update props in store
+	    this.setComponentProps(this.componentId, this.$props, constants_1$1.dynamicRangeSlider);
+	    this.setComponentProps(this.internalRangeComponent, this.$props, constants_1$1.dynamicRangeSlider);
 	    if (!this.enableAppbase && this.$props.index) {
 	      console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
 	    }
 	    // Set custom query in store
 	    updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
 	  },
+	  mounted: function mounted() {
+	    this.setReact();
+	  },
 	  beforeMount: function beforeMount() {
-	    if (this.selectedValue) {
-	      this.setValue(this.selectedValue);
-	    } else if (this.$props.value) {
-	      this.setValue(this.$props.value);
-	    } else if (this.$props.defaultValue) {
-	      this.setValue(this.$props.defaultValue);
+	    var components = [];
+	    if (this.$$store) {
+	      var _this$$$store$getStat = this.$$store.getState();
+	      components = _this$$$store$getStat.components;
+	    }
+	    var value = this.$props.value;
+	    if (this.destroyOnUnmount || components.indexOf(this.componentId) === -1) {
+	      this.addComponent(this.componentId, this.$timestamp);
+	      this.addComponent(this.internalRangeComponent, this.$timestamp);
+	      if (Array.isArray(this.selectedValue)) {
+	        this.handleChange(this.selectedValue);
+	      } else if (this.selectedValue) {
+	        this.handleChange(DynamicRangeSlider.parseValue(this.selectedValue, this.$props));
+	      } else if (value) {
+	        this.handleChange(DynamicRangeSlider.parseValue(value, this.$props));
+	      }
+
+	      // get range before executing other queries
+	      this.updateRangeQueryOptions();
 	    }
 	  },
-	  watch: {
-	    dataField: function dataField() {
-	      this.updateQueryHandler(this.$data.currentValue, this.$props);
-	    },
-	    defaultValue: function defaultValue(newVal) {
-	      this.setValue(newVal);
-	    },
-	    value: function value(newVal, oldVal) {
-	      if (!isEqual$c(newVal, oldVal)) {
-	        this.setValue(newVal);
+	  beforeUpdate: function beforeUpdate() {
+	    if (!this.currentValue) {
+	      this.setDefaultValue(this.range);
+	    }
+	  },
+	  beforeDestroy: function beforeDestroy() {
+	    if (this.destroyOnUnmount) {
+	      this.removeComponent(this.$props.componentId);
+	      this.removeComponent(this.internalRangeComponent);
+	    }
+	  },
+	  methods: {
+	    isControlled: function isControlled() {
+	      if (this.$props.value && this.$listeners) {
+	        return true;
 	      }
+	      return false;
 	    },
-	    selectedValue: function selectedValue(newVal) {
-	      if (!isEqual$c(this.$data.currentValue, newVal)) {
-	        this.setValue(newVal);
+	    setDefaultValue: function setDefaultValue(_ref) {
+	      var start = _ref.start,
+	        end = _ref.end;
+	      if (this.$props.defaultValue) {
+	        var _this$$props$defaultV = this.$props.defaultValue(start, end),
+	          defaultStart = _this$$props$defaultV.start,
+	          defaultEnd = _this$$props$defaultV.end;
+	        this.handleChange([defaultStart, defaultEnd]);
+	      } else if (this.isControlled()) {
+	        this.handleChange(DynamicRangeSlider.parseValue(this.$props.value), 'change');
+	      } else {
+	        this.currentValue = [start, end];
 	      }
 	    },
-	    customQuery: function customQuery(newVal, oldVal) {
-	      if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
-	        this.updateQueryHandler(this.$data.currentValue, this.$props);
+	    setReact: function setReact() {
+	      if (this.$props.react) {
+	        this.watchComponent(this.internalRangeComponent, this.$props.react);
+	        this.watchComponent(this.$props.componentId, this.$props.react);
+	      } else {
+	        this.watchComponent(this.internalRangeComponent, {});
+	        this.watchComponent(this.$props.componentId, {});
 	      }
-	    }
-	  },
-	  render: function render() {
-	    var _this = this;
-	    var h = arguments[0];
-	    return h(Container, {
-	      "class": this.$props.className
-	    }, [this.$props.title && h(Title, {
-	      "class": getClassName$c(this.$props.innerClass, 'title')
-	    }, [this.$props.title]), h(UL, {
-	      "class": getClassName$c(this.$props.innerClass, 'list')
-	    }, [this.$props.data.map(function (item) {
-	      var selected = !!_this.$data.currentValue && _this.$data.currentValue.label === item.label;
-	      return h("li", {
-	        "key": item.label,
-	        "class": "" + (selected ? 'active' : '')
-	      }, [h(Radio, {
-	        "class": getClassName$c(_this.$props.innerClass, 'radio'),
-	        "attrs": {
-	          "id": _this.$props.componentId + "-" + item.label,
-	          "name": _this.$props.componentId,
-	          "value": item.label,
-	          "type": "radio",
-	          "checked": selected,
-	          "show": _this.$props.showRadio
+	    },
+	    rangeQuery: function rangeQuery() {
+	      return {
+	        min: {
+	          min: {
+	            field: this.$props.dataField
+	          }
 	        },
-	        "on": {
-	          "change": _this.handleChange
-	        }
-	      }), h("label", {
-	        "class": getClassName$c(_this.$props.innerClass, 'label'),
-	        "attrs": {
-	          "for": _this.$props.componentId + "-" + item.label
+	        max: {
+	          max: {
+	            field: this.$props.dataField
+	          }
 	        }
-	      }, [item.label])]);
-	    })])]);
-	  },
-	  methods: {
-	    setValue: function setValue(value, props) {
-	      var _this2 = this;
-	      if (props === void 0) {
-	        props = this.$props;
-	      }
-	      var currentValue = typeof value === 'string' ? SingleRange.parseValue(value, props) : value;
-	      var performUpdate = function performUpdate() {
-	        _this2.currentValue = currentValue;
-	        _this2.updateQueryHandler(currentValue, props);
-	        _this2.$emit('valueChange', currentValue);
-	        _this2.$emit('value-change', currentValue);
 	      };
-	      checkValueChange$8(props.componentId, currentValue, props.beforeValueChange, performUpdate);
 	    },
-	    updateQueryHandler: function updateQueryHandler(value, props) {
-	      var customQuery = props.customQuery;
-	      var query = SingleRange.defaultQuery(value, props);
-	      if (customQuery) {
-	        var _ref = customQuery(value, props) || {};
-	        query = _ref.query;
-	        var customQueryOptions = getOptionsFromQuery$1(customQuery(value, props));
-	        updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
-	        this.setQueryOptions(props.componentId, customQueryOptions, false);
+	    updateRangeQueryOptions: function updateRangeQueryOptions() {
+	      var aggs = {};
+	      if (this.$props.nestedField) {
+	        var _aggs;
+	        aggs = (_aggs = {}, _aggs[this.$props.nestedField] = {
+	          nested: {
+	            path: this.$props.nestedField
+	          },
+	          aggs: this.rangeQuery()
+	        }, _aggs);
+	      } else {
+	        aggs = this.rangeQuery();
 	      }
-	      this.updateQuery({
-	        componentId: props.componentId,
-	        query: query,
-	        value: value,
-	        label: props.filterLabel,
-	        showFilter: props.showFilter,
-	        URLParams: props.URLParams,
-	        componentType: constants_1$1.singleRange
+	      this.setQueryOptions(this.internalRangeComponent, {
+	        aggs: aggs
 	      });
 	    },
-	    handleChange: function handleChange(e) {
+	    handleSlider: function handleSlider() {
+	      var sliderValues = this.$refs.slider.getValue();
 	      var value = this.$props.value;
 	      if (value === undefined) {
-	        this.setValue(e.target.value);
+	        this.handleChange(sliderValues);
 	      } else {
-	        this.$emit('change', e.target.value);
+	        this.$emit('change', {
+	          start: sliderValues[0],
+	          end: sliderValues[1]
+	        });
+	      }
+	    },
+	    handleChange: function handleChange(currentValue) {
+	      var _this2 = this;
+	      // Always keep the values within range
+	      var normalizedValue = [this.range ? Math.max(this.range.start, currentValue[0]) : currentValue[0], this.range ? Math.min(this.range.end, currentValue[1]) : currentValue[1]];
+	      var performUpdate = function performUpdate() {
+	        _this2.currentValue = normalizedValue;
+	        _this2.updateQueryHandler(normalizedValue, _this2.$props);
+	        _this2.$emit('valueChange', {
+	          start: normalizedValue[0],
+	          end: normalizedValue[1]
+	        });
+	        _this2.$emit('value-change', {
+	          start: normalizedValue[0],
+	          end: normalizedValue[1]
+	        });
+	      };
+	      checkValueChange$7(this.$props.componentId, {
+	        start: normalizedValue[0],
+	        end: normalizedValue[1]
+	      }, this.$props.beforeValueChange, performUpdate);
+	    },
+	    updateQueryHandler: function updateQueryHandler(value) {
+	      var query = DynamicRangeSlider.defaultQuery(value, this.$props);
+	      if (this.$props.customQuery) {
+	        var customQueryTobeSet = this.$props.customQuery(value, this.$props);
+	        var queryTobeSet = extractQueryFromCustomQuery$7(customQueryTobeSet);
+	        if (queryTobeSet) {
+	          query = queryTobeSet;
+	        }
+	        var customQueryOptions = getOptionsForCustomQuery$7(customQueryTobeSet);
+	        updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, value);
+	        this.setQueryOptions(this.$props.componentId, customQueryOptions, false);
 	      }
+	      var _ref2 = this.range || {
+	          start: value[0],
+	          end: value[1]
+	        },
+	        start = _ref2.start,
+	        end = _ref2.end;
+	      var currentStart = value[0],
+	        currentEnd = value[1];
+	      // check if the slider is at its initial position
+	      var isInitialValue = currentStart === start && currentEnd === end;
+	      this.updateQuery({
+	        componentId: this.$props.componentId,
+	        query: query,
+	        value: value,
+	        label: this.$props.filterLabel,
+	        showFilter: this.$props.showFilter && !isInitialValue,
+	        URLParams: this.$props.URLParams,
+	        componentType: constants_1$1.dynamicRangeSlider
+	      });
 	    }
-	  }
-	};
-	SingleRange.parseValue = function (value, props) {
-	  return props.data.find(function (item) {
-	    return item.label === value;
-	  }) || null;
+	  },
+	  computed: {
+	    labels: function labels() {
+	      if (!this.rangeLabels) return null;
+	      return this.rangeLabels(this.range.start, this.range.end);
+	    }
+	  },
+	  watch: {
+	    $props: {
+	      deep: true,
+	      handler: function handler(newVal) {
+	        var _this3 = this;
+	        var propsKeys = getValidPropsKeys(newVal);
+	        checkSomePropChange$1(newVal, this.componentProps, propsKeys, function () {
+	          _this3.updateComponentProps(_this3.componentId, newVal, constants_1$1.dynamicRangeSlider);
+	          _this3.updateComponentProps(_this3.internalRangeComponent, newVal, constants_1$1.dynamicRangeSlider);
+	        });
+	      }
+	    },
+	    react: function react() {
+	      this.setReact();
+	    },
+	    selectedValue: function selectedValue(newValue) {
+	      if (isEqual$c(newValue, this.currentValue)) return;
+	      var value = newValue || {
+	        start: this.range.start,
+	        end: this.range.end
+	      };
+	      this.$emit('change', value);
+	      this.handleChange(DynamicRangeSlider.parseValue(value, this.$props));
+	    },
+	    range: function range(newValue, oldValue) {
+	      if (isEqual$c(newValue, oldValue) || !this.currentValue) return;
+	      var _ref3 = this.currentValue || [],
+	        currentStart = _ref3[0],
+	        currentEnd = _ref3[1];
+	      var _ref4 = oldValue || {},
+	        oldStart = _ref4.start,
+	        oldEnd = _ref4.end;
+	      var newStart = currentStart === oldStart ? newValue.start : currentStart;
+	      var newEnd = currentEnd === oldEnd ? newValue.end : currentEnd;
+	      this.handleChange([newStart, newEnd]);
+	    },
+	    customQuery: function customQuery(newVal, oldVal) {
+	      if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
+	        this.updateQueryHandler(this.$data.currentValue);
+	      }
+	    },
+	    value: function value(newVal, oldVal) {
+	      if (!isEqual$c(newVal, oldVal)) {
+	        this.handleChange(DynamicRangeSlider.parseValue(newVal, this.$props));
+	      }
+	    }
+	  },
+	  render: function render() {
+	    var h = arguments[0];
+	    if (!this.range || !this.currentValue) {
+	      return null;
+	    }
+	    var _this$range = this.range,
+	      start = _this$range.start,
+	      end = _this$range.end;
+	    return h(Container, {
+	      "class": this.$props.className
+	    }, [this.$props.title && h(Title, {
+	      "class": getClassName$b(this.$props.innerClass, 'title')
+	    }, [this.$props.title]), h(vueNoSsr_common, [h(Slider, {
+	      "class": getClassName$b(this.$props.innerClass, 'slider')
+	    }, [h("vue-slider-component", {
+	      "ref": "slider",
+	      "attrs": {
+	        "value": [Math.floor(Math.max(start, this.currentValue[0])), Math.ceil(Math.min(end, this.currentValue[1]))],
+	        "min": Math.floor(Math.min(start, this.currentValue[0])),
+	        "max": Math.ceil(Math.max(end, this.currentValue[1])),
+	        "dotSize": 20,
+	        "height": 4,
+	        "enable-cross": false,
+	        "tooltip": "always"
+	      },
+	      "on": {
+	        "drag-end": this.handleSlider
+	      },
+	      "props": _extends({}, this.$props.sliderOptions)
+	    }), this.labels ? h("div", {
+	      "class": "label-container"
+	    }, [h("label", {
+	      "class": getClassName$b(this.$props.innerClass, 'label') || 'range-label-left'
+	    }, [this.labels.start]), h("label", {
+	      "class": getClassName$b(this.$props.innerClass, 'label') || 'range-label-right'
+	    }, [this.labels.end])]) : null])])]);
+	  }
 	};
-	SingleRange.defaultQuery = function (value, props) {
+	DynamicRangeSlider.defaultQuery = function (values, props) {
 	  var query = null;
-	  if (value) {
+	  if (Array.isArray(values) && values.length) {
 	    var _range;
 	    query = {
 	      range: (_range = {}, _range[props.dataField] = {
-	        gte: value.start,
-	        lte: value.end,
+	        gte: values[0],
+	        lte: values[1],
 	        boost: 2.0
 	      }, _range)
 	    };
@@ -24392,48 +24459,79 @@
 	  }
 	  return query;
 	};
+	DynamicRangeSlider.parseValue = function (value) {
+	  if (value) {
+	    return Array.isArray(value) ? value : [value.start, value.end];
+	  }
+	  return [];
+	};
+	DynamicRangeSlider.hasInternalComponent = function () {
+	  return true;
+	};
 	var mapStateToProps$b = function mapStateToProps(state, props) {
+	  var componentId = state.aggregations[props.componentId];
+	  var internalRange = state.aggregations[props.componentId + "__range__internal"];
+	  var options = componentId && componentId[props.dataField];
+	  var range = state.aggregations[props.componentId + "__range__internal"];
+	  if (props.nestedField) {
+	    options = options && componentId[props.dataField][props.nestedField] && componentId[props.dataField][props.nestedField].buckets ? componentId[props.dataField][props.nestedField].buckets : [];
+	    range = range && internalRange[props.nestedField].min ? {
+	      start: internalRange[props.nestedField].min.value,
+	      end: internalRange[props.nestedField].max.value
+	    } : null;
+	  } else {
+	    options = options && componentId[props.dataField].buckets ? componentId[props.dataField].buckets : [];
+	    range = range && internalRange.min ? {
+	      start: internalRange.min.value,
+	      end: internalRange.max.value
+	    } : null;
+	  }
 	  return {
-	    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
+	    options: options,
+	    range: range,
+	    selectedValue: state.selectedValues[props.componentId] ? state.selectedValues[props.componentId].value : null,
 	    componentProps: state.props[props.componentId],
 	    enableAppbase: state.config.enableAppbase
 	  };
 	};
 	var mapDispatchtoProps$8 = {
+	  addComponent: addComponent$1,
+	  removeComponent: removeComponent$1,
 	  updateQuery: updateQuery$9,
+	  watchComponent: watchComponent$1,
+	  setQueryListener: setQueryListener$1,
 	  setQueryOptions: setQueryOptions$8,
-	  setCustomQuery: setCustomQuery$8
-	};
-	var RangeConnected$1 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$b, mapDispatchtoProps$8)(SingleRange), {
-	  componentType: constants_1$1.singleRange
-	}));
-	RangeConnected$1.name = SingleRange.name;
-	RangeConnected$1.defaultQuery = SingleRange.defaultQuery;
-	RangeConnected$1.parseValue = SingleRange.parseValue;
-	RangeConnected$1.hasInternalComponent = SingleRange.hasInternalComponent;
-	RangeConnected$1.install = function (Vue) {
-	  Vue.component(RangeConnected$1.name, RangeConnected$1);
+	  setComponentProps: setComponentProps$1,
+	  setCustomQuery: setCustomQuery$8,
+	  updateComponentProps: updateComponentProps$2
 	};
+	var RangeConnected = PreferencesConsumer(connect(mapStateToProps$b, mapDispatchtoProps$8)(DynamicRangeSlider));
+	RangeConnected.defaultQuery = DynamicRangeSlider.defaultQuery;
+	RangeConnected.parseValue = DynamicRangeSlider.parseValue;
+	RangeConnected.hasInternalComponent = DynamicRangeSlider.hasInternalComponent;
+	RangeConnected.name = DynamicRangeSlider.name;
+
 	// Add componentType for SSR
-	RangeConnected$1.componentType = constants_1$1.singleRange;
+	RangeConnected.componentType = constants_1$1.dynamicRangeSlider;
+	RangeConnected.install = function (Vue) {
+	  Vue.component(RangeConnected.name, RangeConnected);
+	};
 
 	var updateQuery$a = lib_5.updateQuery,
 	  setQueryOptions$9 = lib_5.setQueryOptions,
 	  setCustomQuery$9 = lib_5.setCustomQuery;
 	var isEqual$d = lib_8.isEqual,
-	  checkValueChange$9 = lib_8.checkValueChange,
-	  getClassName$d = lib_8.getClassName,
-	  getOptionsFromQuery$2 = lib_8.getOptionsFromQuery;
-	var MultiRange = {
-	  name: 'MultiRange',
+	  checkValueChange$8 = lib_8.checkValueChange,
+	  getClassName$c = lib_8.getClassName,
+	  getOptionsFromQuery$1 = lib_8.getOptionsFromQuery;
+	var SingleRange = {
+	  name: 'SingleRange',
 	  data: function data() {
-	    this.state = {
-	      currentValue: [],
-	      showModal: false,
-	      selectedValues: {}
+	    this.__state = {
+	      currentValue: null
 	    };
 	    this.type = 'range';
-	    return this.state;
+	    return this.__state;
 	  },
 	  props: {
 	    beforeValueChange: types.func,
@@ -24442,65 +24540,276 @@
 	    customQuery: types.func,
 	    data: types.data,
 	    dataField: types.stringRequired,
-	    defaultValue: types.stringArray,
-	    value: types.stringArray,
+	    defaultValue: types.string,
+	    value: types.value,
 	    filterLabel: types.string,
 	    innerClass: types.style,
 	    react: types.react,
 	    showFilter: VueTypes.bool.def(true),
-	    showCheckbox: VueTypes.bool.def(true),
+	    showRadio: VueTypes.bool.def(true),
 	    title: types.title,
 	    URLParams: VueTypes.bool.def(false),
 	    nestedField: types.string,
 	    index: VueTypes.string,
 	    endpoint: types.endpointConfig
 	  },
-	  methods: {
-	    handleClick: function handleClick(e) {
-	      var value = this.$props.value;
-	      if (value === undefined) {
-	        this.selectItem(e.target.value);
-	      } else {
-	        var values = parseValueArray(this.selectedValues, e.target.value);
-	        this.$emit('change', values);
-	      }
+	  created: function created() {
+	    if (!this.enableAppbase && this.$props.index) {
+	      console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
+	    }
+	    // Set custom query in store
+	    updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
+	  },
+	  beforeMount: function beforeMount() {
+	    if (this.selectedValue) {
+	      this.setValue(this.selectedValue);
+	    } else if (this.$props.value) {
+	      this.setValue(this.$props.value);
+	    } else if (this.$props.defaultValue) {
+	      this.setValue(this.$props.defaultValue);
+	    }
+	  },
+	  watch: {
+	    dataField: function dataField() {
+	      this.updateQueryHandler(this.$data.currentValue, this.$props);
 	    },
-	    selectItem: function selectItem(item, isDefaultValue, props, reset) {
-	      var _this = this;
-	      if (isDefaultValue === void 0) {
-	        isDefaultValue = false;
+	    defaultValue: function defaultValue(newVal) {
+	      this.setValue(newVal);
+	    },
+	    value: function value(newVal, oldVal) {
+	      if (!isEqual$d(newVal, oldVal)) {
+	        this.setValue(newVal);
 	      }
-	      if (props === void 0) {
-	        props = this.$props;
+	    },
+	    selectedValue: function selectedValue(newVal) {
+	      if (!isEqual$d(this.$data.currentValue, newVal)) {
+	        this.setValue(newVal);
 	      }
-	      if (reset === void 0) {
-	        reset = false;
+	    },
+	    customQuery: function customQuery(newVal, oldVal) {
+	      if (!isQueryIdentical(newVal, oldVal, this.$data.currentValue, this.$props)) {
+	        this.updateQueryHandler(this.$data.currentValue, this.$props);
 	      }
-	      var currentValue = this.currentValue,
-	        selectedValues = this.selectedValues;
-	      if (!item) {
-	        currentValue = [];
-	        selectedValues = {};
-	      } else if (isDefaultValue) {
-	        currentValue = MultiRange.parseValue(item, props);
-	        var values = {};
-	        currentValue.forEach(function (value) {
-	          values[[value.label]] = true;
-	        });
-	        if (reset) {
-	          selectedValues = values;
-	        } else {
-	          selectedValues = _extends({}, selectedValues, values);
-	        }
-	      } else if (selectedValues[item]) {
-	        currentValue = currentValue.filter(function (value) {
-	          return value.label !== item;
-	        });
-	        var _selectedValues = selectedValues,
-	          del = _selectedValues[item],
-	          selected = _objectWithoutPropertiesLoose(_selectedValues, [item].map(_toPropertyKey));
-	        selectedValues = selected;
-	      } else {
+	    }
+	  },
+	  render: function render() {
+	    var _this = this;
+	    var h = arguments[0];
+	    return h(Container, {
+	      "class": this.$props.className
+	    }, [this.$props.title && h(Title, {
+	      "class": getClassName$c(this.$props.innerClass, 'title')
+	    }, [this.$props.title]), h(UL, {
+	      "class": getClassName$c(this.$props.innerClass, 'list')
+	    }, [this.$props.data.map(function (item) {
+	      var selected = !!_this.$data.currentValue && _this.$data.currentValue.label === item.label;
+	      return h("li", {
+	        "key": item.label,
+	        "class": "" + (selected ? 'active' : '')
+	      }, [h(Radio, {
+	        "class": getClassName$c(_this.$props.innerClass, 'radio'),
+	        "attrs": {
+	          "id": _this.$props.componentId + "-" + item.label,
+	          "name": _this.$props.componentId,
+	          "value": item.label,
+	          "type": "radio",
+	          "checked": selected,
+	          "show": _this.$props.showRadio
+	        },
+	        "on": {
+	          "change": _this.handleChange
+	        }
+	      }), h("label", {
+	        "class": getClassName$c(_this.$props.innerClass, 'label'),
+	        "attrs": {
+	          "for": _this.$props.componentId + "-" + item.label
+	        }
+	      }, [item.label])]);
+	    })])]);
+	  },
+	  methods: {
+	    setValue: function setValue(value, props) {
+	      var _this2 = this;
+	      if (props === void 0) {
+	        props = this.$props;
+	      }
+	      var currentValue = typeof value === 'string' ? SingleRange.parseValue(value, props) : value;
+	      var performUpdate = function performUpdate() {
+	        _this2.currentValue = currentValue;
+	        _this2.updateQueryHandler(currentValue, props);
+	        _this2.$emit('valueChange', currentValue);
+	        _this2.$emit('value-change', currentValue);
+	      };
+	      checkValueChange$8(props.componentId, currentValue, props.beforeValueChange, performUpdate);
+	    },
+	    updateQueryHandler: function updateQueryHandler(value, props) {
+	      var customQuery = props.customQuery;
+	      var query = SingleRange.defaultQuery(value, props);
+	      if (customQuery) {
+	        var _ref = customQuery(value, props) || {};
+	        query = _ref.query;
+	        var customQueryOptions = getOptionsFromQuery$1(customQuery(value, props));
+	        updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.currentValue);
+	        this.setQueryOptions(props.componentId, customQueryOptions, false);
+	      }
+	      this.updateQuery({
+	        componentId: props.componentId,
+	        query: query,
+	        value: value,
+	        label: props.filterLabel,
+	        showFilter: props.showFilter,
+	        URLParams: props.URLParams,
+	        componentType: constants_1$1.singleRange
+	      });
+	    },
+	    handleChange: function handleChange(e) {
+	      var value = this.$props.value;
+	      if (value === undefined) {
+	        this.setValue(e.target.value);
+	      } else {
+	        this.$emit('change', e.target.value);
+	      }
+	    }
+	  }
+	};
+	SingleRange.parseValue = function (value, props) {
+	  return props.data.find(function (item) {
+	    return item.label === value;
+	  }) || null;
+	};
+	SingleRange.defaultQuery = function (value, props) {
+	  var query = null;
+	  if (value) {
+	    var _range;
+	    query = {
+	      range: (_range = {}, _range[props.dataField] = {
+	        gte: value.start,
+	        lte: value.end,
+	        boost: 2.0
+	      }, _range)
+	    };
+	  }
+	  if (query && props.nestedField) {
+	    return {
+	      query: {
+	        nested: {
+	          path: props.nestedField,
+	          query: query
+	        }
+	      }
+	    };
+	  }
+	  return query;
+	};
+	var mapStateToProps$c = function mapStateToProps(state, props) {
+	  return {
+	    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
+	    componentProps: state.props[props.componentId],
+	    enableAppbase: state.config.enableAppbase
+	  };
+	};
+	var mapDispatchtoProps$9 = {
+	  updateQuery: updateQuery$a,
+	  setQueryOptions: setQueryOptions$9,
+	  setCustomQuery: setCustomQuery$9
+	};
+	var RangeConnected$1 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$c, mapDispatchtoProps$9)(SingleRange), {
+	  componentType: constants_1$1.singleRange
+	}));
+	RangeConnected$1.name = SingleRange.name;
+	RangeConnected$1.defaultQuery = SingleRange.defaultQuery;
+	RangeConnected$1.parseValue = SingleRange.parseValue;
+	RangeConnected$1.hasInternalComponent = SingleRange.hasInternalComponent;
+	RangeConnected$1.install = function (Vue) {
+	  Vue.component(RangeConnected$1.name, RangeConnected$1);
+	};
+	// Add componentType for SSR
+	RangeConnected$1.componentType = constants_1$1.singleRange;
+
+	var updateQuery$b = lib_5.updateQuery,
+	  setQueryOptions$a = lib_5.setQueryOptions,
+	  setCustomQuery$a = lib_5.setCustomQuery;
+	var isEqual$e = lib_8.isEqual,
+	  checkValueChange$9 = lib_8.checkValueChange,
+	  getClassName$d = lib_8.getClassName,
+	  getOptionsFromQuery$2 = lib_8.getOptionsFromQuery;
+	var MultiRange = {
+	  name: 'MultiRange',
+	  data: function data() {
+	    this.state = {
+	      currentValue: [],
+	      showModal: false,
+	      selectedValues: {}
+	    };
+	    this.type = 'range';
+	    return this.state;
+	  },
+	  props: {
+	    beforeValueChange: types.func,
+	    className: VueTypes.string.def(''),
+	    componentId: types.stringRequired,
+	    customQuery: types.func,
+	    data: types.data,
+	    dataField: types.stringRequired,
+	    defaultValue: types.stringArray,
+	    value: types.stringArray,
+	    filterLabel: types.string,
+	    innerClass: types.style,
+	    react: types.react,
+	    showFilter: VueTypes.bool.def(true),
+	    showCheckbox: VueTypes.bool.def(true),
+	    title: types.title,
+	    URLParams: VueTypes.bool.def(false),
+	    nestedField: types.string,
+	    index: VueTypes.string,
+	    endpoint: types.endpointConfig
+	  },
+	  methods: {
+	    handleClick: function handleClick(e) {
+	      var value = this.$props.value;
+	      if (value === undefined) {
+	        this.selectItem(e.target.value);
+	      } else {
+	        var values = parseValueArray(this.selectedValues, e.target.value);
+	        this.$emit('change', values);
+	      }
+	    },
+	    selectItem: function selectItem(item, isDefaultValue, props, reset) {
+	      var _this = this;
+	      if (isDefaultValue === void 0) {
+	        isDefaultValue = false;
+	      }
+	      if (props === void 0) {
+	        props = this.$props;
+	      }
+	      if (reset === void 0) {
+	        reset = false;
+	      }
+	      var currentValue = this.currentValue,
+	        selectedValues = this.selectedValues;
+	      if (!item) {
+	        currentValue = [];
+	        selectedValues = {};
+	      } else if (isDefaultValue) {
+	        currentValue = MultiRange.parseValue(item, props);
+	        var values = {};
+	        currentValue.forEach(function (value) {
+	          values[[value.label]] = true;
+	        });
+	        if (reset) {
+	          selectedValues = values;
+	        } else {
+	          selectedValues = _extends({}, selectedValues, values);
+	        }
+	      } else if (selectedValues[item]) {
+	        currentValue = currentValue.filter(function (value) {
+	          return value.label !== item;
+	        });
+	        var _selectedValues = selectedValues,
+	          del = _selectedValues[item],
+	          selected = _objectWithoutPropertiesLoose(_selectedValues, [item].map(_toPropertyKey));
+	        selectedValues = selected;
+	      } else {
 	        var _extends2;
 	        var currentItems = props.data.filter(function (value) {
 	          return item.indexOf(value.label) !== -1;
@@ -24546,12 +24855,12 @@
 	      this.selectItem(newVal, true, undefined, true);
 	    },
 	    value: function value(newVal, oldVal) {
-	      if (!isEqual$d(newVal, oldVal)) {
+	      if (!isEqual$e(newVal, oldVal)) {
 	        this.selectItem(newVal, true, undefined, true);
 	      }
 	    },
 	    selectedValue: function selectedValue(newVal) {
-	      if (!isEqual$d(this.$data.currentValue, newVal)) {
+	      if (!isEqual$e(this.$data.currentValue, newVal)) {
 	        var processSelectedValues = newVal ? newVal.map(function (item) {
 	          if (typeof item === 'object' && 'label' in item) {
 	            return item.label;
@@ -24664,19 +24973,19 @@
 	  }
 	  return query;
 	};
-	var mapStateToProps$c = function mapStateToProps(state, props) {
+	var mapStateToProps$d = function mapStateToProps(state, props) {
 	  return {
 	    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
 	    componentProps: state.props[props.componentId],
 	    enableAppbase: state.config.enableAppbase
 	  };
 	};
-	var mapDispatchtoProps$9 = {
-	  updateQuery: updateQuery$a,
-	  setQueryOptions: setQueryOptions$9,
-	  setCustomQuery: setCustomQuery$9
+	var mapDispatchtoProps$a = {
+	  updateQuery: updateQuery$b,
+	  setQueryOptions: setQueryOptions$a,
+	  setCustomQuery: setCustomQuery$a
 	};
-	var RangeConnected$2 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$c, mapDispatchtoProps$9)(MultiRange), {
+	var RangeConnected$2 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$d, mapDispatchtoProps$a)(MultiRange), {
 	  componentType: constants_1$1.multiRange
 	}));
 	RangeConnected$2.name = MultiRange.name;
@@ -24689,13 +24998,13 @@
 	// Add componentType for SSR
 	RangeConnected$2.componentType = constants_1$1.multiRange;
 
-	var updateQuery$b = lib_5.updateQuery,
-	  setQueryOptions$a = lib_5.setQueryOptions,
-	  setCustomQuery$a = lib_5.setCustomQuery;
+	var updateQuery$c = lib_5.updateQuery,
+	  setQueryOptions$b = lib_5.setQueryOptions,
+	  setCustomQuery$b = lib_5.setCustomQuery;
 	var checkValueChange$a = lib_8.checkValueChange,
 	  getClassName$e = lib_8.getClassName,
 	  getOptionsFromQuery$3 = lib_8.getOptionsFromQuery,
-	  isEqual$e = lib_8.isEqual;
+	  isEqual$f = lib_8.isEqual;
 	var RangeSlider = {
 	  name: 'RangeSlider',
 	  components: getComponents(),
@@ -24809,12 +25118,12 @@
 	      this.handleChange(RangeSlider.parseValue(newVal, this.$props));
 	    },
 	    value: function value(newVal, oldVal) {
-	      if (!isEqual$e(newVal, oldVal)) {
+	      if (!isEqual$f(newVal, oldVal)) {
 	        this.handleChange(RangeSlider.parseValue(newVal, this.$props));
 	      }
 	    },
 	    selectedValue: function selectedValue(newVal) {
-	      if (!isEqual$e(this.$data.currentValue, newVal)) {
+	      if (!isEqual$f(this.$data.currentValue, newVal)) {
 	        this.handleChange(RangeSlider.parseValue(newVal, this.$props));
 	        this.$emit('change', newVal);
 	      }
@@ -24917,7 +25226,7 @@
 	  }
 	  return [];
 	};
-	var mapStateToProps$d = function mapStateToProps(state, props) {
+	var mapStateToProps$e = function mapStateToProps(state, props) {
 	  return {
 	    options: state.aggregations[props.componentId] ? state.aggregations[props.componentId][props.dataField] && state.aggregations[props.componentId][props.dataField].buckets // eslint-disable-line
 	    : [],
@@ -24926,12 +25235,12 @@
 	    enableAppbase: state.config.enableAppbase
 	  };
 	};
-	var mapDispatchtoProps$a = {
-	  updateQuery: updateQuery$b,
-	  setQueryOptions: setQueryOptions$a,
-	  setCustomQuery: setCustomQuery$a
+	var mapDispatchtoProps$b = {
+	  updateQuery: updateQuery$c,
+	  setQueryOptions: setQueryOptions$b,
+	  setCustomQuery: setCustomQuery$b
 	};
-	var RangeConnected$3 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$d, mapDispatchtoProps$a)(RangeSlider), {
+	var RangeConnected$3 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$e, mapDispatchtoProps$b)(RangeSlider), {
 	  componentType: constants_1$1.rangeSlider
 	}));
 	RangeConnected$3.name = RangeSlider.name;
@@ -24955,7 +25264,7 @@
 	});
 
 	var getClassName$f = lib_8.getClassName,
-	  isEqual$f = lib_8.isEqual;
+	  isEqual$g = lib_8.isEqual;
 	var RangeInput = {
 	  name: 'RangeInput',
 	  components: {
@@ -25033,7 +25342,7 @@
 	    },
 	    handleChange: function handleChange(value, event) {
 	      var currentValue = value;
-	      if (this.shouldUpdate(value) && !isEqual$f(value, this.currentValue)) {
+	      if (this.shouldUpdate(value) && !isEqual$g(value, this.currentValue)) {
 	        switch (event) {
 	          case 'change':
 	            if (!value) {
@@ -25064,488 +25373,198 @@
 	    handleInputChange: function handleInputChange(e) {
 	      var _e$target = e.target,
 	        name = _e$target.name,
-	        value = _e$target.value;
-	      if (Number.isNaN(value)) {
-	        if (name === 'start') {
-	          this.$data.isStartValid = false;
-	        } else {
-	          this.$data.isEndValid = false;
-	        }
-	      } else if (name === 'start' && !this.$data.isStartValid) {
-	        this.$data.isStartValid = true;
-	      } else if (name === 'end' && !this.$data.isEndValid) {
-	        this.$data.isEndValid = true;
-	      }
-	      if (this.$data.isStartValid && this.$data.isEndValid) {
-	        if (name === 'start') {
-	          this.handleChange({
-	            start: Number(value),
-	            end: this.$data.currentValue.end
-	          }, 'change');
-	        } else {
-	          this.handleChange({
-	            start: this.$data.currentValue.start,
-	            end: Number(value)
-	          }, 'change');
-	        }
-	      }
-	    }
-	  },
-	  watch: {
-	    defaultValue: function defaultValue(newVal, oldVal) {
-	      if (oldVal.start !== newVal.start || oldVal.end !== newVal.end) {
-	        this.handleChange(newVal);
-	      }
-	    },
-	    value: function value(newVal, oldVal) {
-	      if (!isEqual$f(newVal, oldVal)) {
-	        if (this.isControlled()) {
-	          this.handleChange(newVal, 'change');
-	        }
-	      }
-	    }
-	  },
-	  created: function created() {
-	    if (this.$props.defaultValue && this.$props.defaultValue.start && this.$props.defaultValue.end) {
-	      this.handleChange(this.$props.defaultValue);
-	    }
-	    if (this.isControlled()) {
-	      this.handleChange(this.$props.value, 'change');
-	    }
-	  },
-	  render: function render() {
-	    var h = arguments[0];
-	    var _this$$props = this.$props,
-	      className = _this$$props.className,
-	      dataField = _this$$props.dataField,
-	      range = _this$$props.range,
-	      rangeLabels = _this$$props.rangeLabels,
-	      componentId = _this$$props.componentId,
-	      innerClass = _this$$props.innerClass,
-	      stepValue = _this$$props.stepValue,
-	      componentStyle = _this$$props.componentStyle,
-	      themePreset = _this$$props.themePreset,
-	      includeNullValues = _this$$props.includeNullValues,
-	      beforeValueChange = _this$$props.beforeValueChange,
-	      customQuery = _this$$props.customQuery,
-	      data = _this$$props.data,
-	      filterLabel = _this$$props.filterLabel,
-	      react = _this$$props.react,
-	      showFilter = _this$$props.showFilter,
-	      showCheckbox = _this$$props.showCheckbox,
-	      title = _this$$props.title,
-	      URLParams = _this$$props.URLParams,
-	      sliderOptions = _this$$props.sliderOptions,
-	      nestedField = _this$$props.nestedField;
-	    return h(Container, {
-	      "style": componentStyle,
-	      "class": className
-	    }, [h(RangeConnected$3, {
-	      "attrs": {
-	        "componentId": componentId,
-	        "value": {
-	          start: this.currentValue.start,
-	          end: this.currentValue.end
-	        },
-	        "range": range,
-	        "dataField": dataField,
-	        "rangeLabels": rangeLabels,
-	        "includeNullValues": includeNullValues,
-	        "beforeValueChange": beforeValueChange,
-	        "customQuery": customQuery,
-	        "data": data,
-	        "filterLabel": filterLabel,
-	        "react": react,
-	        "showFilter": showFilter,
-	        "showCheckbox": showCheckbox,
-	        "title": title,
-	        "uRLParams": URLParams,
-	        "sliderOptions": sliderOptions,
-	        "nestedField": nestedField
-	      },
-	      "on": {
-	        "change": this.handleOnChange,
-	        "value-change": this.handleValueChange
-	      }
-	    }), h(Flex, {
-	      "class": getClassName$f(innerClass, 'input-container') || ''
-	    }, [h(Flex, {
-	      "attrs": {
-	        "direction": "column",
-	        "flex": 2
-	      }
-	    }, [h(Input, {
-	      "key": componentId + "-start-value",
-	      "attrs": {
-	        "name": "start",
-	        "type": "number",
-	        "step": stepValue,
-	        "themePreset": themePreset,
-	        "aria-label": componentId + "-start-input",
-	        "min": this.$props.range ? this.$props.range.start : 0,
-	        "alert": !this.isStartValid
-	      },
-	      "on": {
-	        "change": this.handleInputChange
-	      },
-	      "class": getClassName$f(innerClass, 'input') || '',
-	      "domProps": _extends({}, {
-	        value: this.currentValue.start
-	      })
-	    }), !this.isStartValid && h(Content, {
-	      "attrs": {
-	        "alert": true
-	      }
-	    }, ["Input range is invalid"])]), h(Flex, {
-	      "attrs": {
-	        "justifyContent": "center",
-	        "alignItems": "center",
-	        "flex": 1
-	      }
-	    }, ["-"]), h(Flex, {
-	      "attrs": {
-	        "direction": "column",
-	        "flex": 2
-	      }
-	    }, [h(Input, {
-	      "key": componentId + "-end-value",
-	      "attrs": {
-	        "name": "end",
-	        "type": "number",
-	        "step": stepValue,
-	        "themePreset": themePreset,
-	        "aria-label": componentId + "-end-input",
-	        "max": this.$props.range ? this.$props.range.end : 10,
-	        "alert": !this.isEndValid
-	      },
-	      "on": {
-	        "change": this.handleInputChange
-	      },
-	      "class": getClassName$f(innerClass, 'input') || '',
-	      "domProps": _extends({}, {
-	        value: this.currentValue.end
-	      })
-	    }), !this.isEndValid && h(Content, {
-	      "attrs": {
-	        "alert": true
-	      }
-	    }, ["Input range is invalid"])])])]);
-	  }
-	};
-	var mapStateToProps$e = function mapStateToProps(state) {
-	  return {
-	    themePreset: state.config.themePreset
-	  };
-	};
-	var RangeConnected$4 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$e, {})(RangeInput), {
-	  componentType: constants_1$1.rangeInput
-	}));
-	RangeConnected$4.name = RangeInput.name;
-	RangeConnected$4.install = function (Vue) {
-	  Vue.component(RangeConnected$4.name, RangeConnected$4);
-	};
-
-	// Add componentType for SSR
-	RangeConnected$4.componentType = constants_1$1.rangeInput;
-
-	var _excluded = ["options"];
-	var updateQuery$c = lib_5.updateQuery,
-	  setQueryOptions$b = lib_5.setQueryOptions,
-	  setCustomQuery$b = lib_5.setCustomQuery,
-	  setDefaultQuery$7 = lib_5.setDefaultQuery;
-	var parseHits$1 = lib_8.parseHits,
-	  isEqual$g = lib_8.isEqual,
-	  getCompositeAggsQuery$5 = lib_8.getCompositeAggsQuery,
-	  getResultStats$3 = lib_8.getResultStats,
-	  extractQueryFromCustomQuery$7 = lib_8.extractQueryFromCustomQuery,
-	  getOptionsForCustomQuery$7 = lib_8.getOptionsForCustomQuery;
-	var ReactiveComponent = {
-	  name: 'ReactiveComponent',
-	  props: {
-	    componentId: types.stringRequired,
-	    aggregationField: types.string,
-	    aggregationSize: VueTypes.number,
-	    size: VueTypes.number,
-	    defaultQuery: types.func,
-	    customQuery: types.func,
-	    filterLabel: types.string,
-	    react: types.react,
-	    showFilter: VueTypes.bool.def(true),
-	    URLParams: VueTypes.bool.def(false),
-	    distinctField: types.string,
-	    distinctFieldConfig: types.props,
-	    index: VueTypes.string,
-	    endpoint: types.endpointConfig
-	  },
-	  created: function created() {
-	    var _this = this;
-	    var props = this.$props;
-	    this.internalComponent = null;
-	    this.$defaultQuery = null;
-	    // Set custom query in store
-	    updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.selectedValue);
-	    var customQuery = props.customQuery,
-	      componentId = props.componentId,
-	      filterLabel = props.filterLabel,
-	      showFilter = props.showFilter,
-	      URLParams = props.URLParams,
-	      distinctField = props.distinctField,
-	      distinctFieldConfig = props.distinctFieldConfig,
-	      index = props.index;
-	    if (this.enableAppbase && this.aggregationField && this.aggregationField !== '') {
-	      console.warn('Warning(ReactiveSearch): The `aggregationField` prop has been marked as deprecated, please use the `distinctField` prop instead.');
-	    }
-	    if (!this.enableAppbase && (distinctField || distinctFieldConfig)) {
-	      console.warn('Warning(ReactiveSearch): In order to use the `distinctField` and `distinctFieldConfig` props, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
-	    }
-	    if (!this.enableAppbase && index) {
-	      console.warn('Warning(ReactiveSearch): In order to use the `index` prop, the `enableAppbase` prop must be set to true in `ReactiveBase`.');
-	    }
-	    if (customQuery) {
-	      var calcCustomQuery = customQuery(this.selectedValue, props);
-	      var query = extractQueryFromCustomQuery$7(calcCustomQuery);
-	      var customQueryOptions = calcCustomQuery ? getOptionsForCustomQuery$7(calcCustomQuery) : null;
-	      if (customQueryOptions) {
-	        this.setQueryOptions(componentId, _extends({}, customQueryOptions, this.getAggsQuery()), false);
-	      } else this.setQueryOptions(componentId, this.getAggsQuery(), false);
-	      this.updateQuery({
-	        componentId: componentId,
-	        query: query,
-	        value: this.selectedValue || null,
-	        label: filterLabel,
-	        showFilter: showFilter,
-	        URLParams: URLParams
-	      });
-	    }
-	    this.setQuery = function (_ref) {
-	      var options = _ref.options,
-	        obj = _objectWithoutPropertiesLoose(_ref, _excluded);
-	      var queryToBeSet = obj.query;
-
-	      // when enableAppbase is true, Backend throws error because of repeated query in request body
-	      if (queryToBeSet && queryToBeSet.query) {
-	        queryToBeSet = queryToBeSet.query;
-	      }
-	      var customQueryCalc = _extends({}, options, {
-	        query: queryToBeSet
-	      });
-	      var rsAPIQuery = customQueryCalc;
-	      // handle stored queries
-	      if (queryToBeSet && queryToBeSet.id) {
-	        rsAPIQuery = queryToBeSet;
-	      }
-	      // Update customQuery field for RS API
-	      _this.setCustomQuery(props.componentId, rsAPIQuery);
-	      if (options) {
-	        _this.setQueryOptions(props.componentId, _extends({}, _this.getAggsQuery(), options), false);
-	      }
-	      _this.updateQuery(_extends({}, obj, {
-	        query: customQueryCalc.query,
-	        componentId: props.componentId,
-	        label: props.filterLabel,
-	        showFilter: props.showFilter,
-	        URLParams: props.URLParams
-	      }));
-	    };
-	    if (props.defaultQuery) {
-	      this.internalComponent = props.componentId + "__internal";
-	    }
-	    if (this.internalComponent && this.$props.defaultQuery) {
-	      updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.selectedValue);
-	      this.$defaultQuery = this.$props.defaultQuery(this.selectedValue, this.$props);
-	      var _query = extractQueryFromCustomQuery$7(this.$defaultQuery);
-	      var queryOptions = getOptionsForCustomQuery$7(this.$defaultQuery);
-	      if (queryOptions) {
-	        this.setQueryOptions(this.internalComponent, _extends({}, queryOptions, this.getAggsQuery()), false);
-	      } else this.setQueryOptions(this.internalComponent, this.getAggsQuery(), false);
-	      this.updateQuery({
-	        componentId: this.internalComponent,
-	        query: _query
-	      });
-	    }
-	  },
-	  watch: {
-	    hits: function hits(newVal, oldVal) {
-	      if (!isEqual$g(newVal, oldVal)) {
-	        this.$emit('data', this.getData());
-	      }
-	    },
-	    rawData: function rawData(newVal, oldVal) {
-	      if (!isEqual$g(newVal, oldVal)) {
-	        this.$emit('data', this.getData());
-	      }
-	    },
-	    aggregations: function aggregations(newVal, oldVal) {
-	      if (!isEqual$g(newVal, oldVal)) {
-	        this.$emit('data', this.getData());
-	      }
-	    },
-	    aggregationData: function aggregationData(newVal, oldVal) {
-	      if (!isEqual$g(newVal, oldVal)) {
-	        this.$emit('data', this.getData());
-	      }
-	    },
-	    promotedResults: function promotedResults(newVal, oldVal) {
-	      if (!isEqual$g(newVal, oldVal)) {
-	        this.$emit('data', this.getData());
-	      }
-	    },
-	    hidden: function hidden(newVal, oldVal) {
-	      if (!isEqual$g(newVal, oldVal)) {
-	        this.$emit('data', this.getData());
-	      }
-	    },
-	    total: function total(newVal, oldVal) {
-	      if (!isEqual$g(newVal, oldVal)) {
-	        this.$emit('data', this.getData());
-	      }
-	    },
-	    time: function time(newVal, oldVal) {
-	      if (!isEqual$g(newVal, oldVal)) {
-	        this.$emit('data', this.getData());
-	      }
-	    },
-	    defaultQuery: function defaultQuery(newVal, oldVal) {
-	      if (newVal && !isQueryIdentical(newVal, oldVal, this.selectedValue, this.$props)) {
-	        this.$defaultQuery = newVal(this.selectedValue, this.$props);
-	        var query = extractQueryFromCustomQuery$7(this.$defaultQuery);
-	        var queryOptions = getOptionsForCustomQuery$7(this.$defaultQuery);
-	        if (queryOptions) {
-	          this.setQueryOptions(this.internalComponent, _extends({}, queryOptions, this.getAggsQuery()), false);
-	        } else this.setQueryOptions(this.internalComponent, this.getAggsQuery(), false);
-	        // Update default query for RS API
-	        updateDefaultQuery(this.componentId, this.setDefaultQuery, this.$props, this.selectedValue);
-	        this.updateQuery({
-	          componentId: this.internalComponent,
-	          query: query
-	        });
-	      }
-	    },
-	    customQuery: function customQuery(newVal, oldVal) {
-	      if (newVal && !isQueryIdentical(newVal, oldVal, this.selectedValue, this.$props)) {
-	        var componentId = this.$props.componentId;
-	        this.$customQuery = newVal(this.selectedValue, this.$props);
-	        var query = extractQueryFromCustomQuery$7(this.$customQuery);
-	        var queryOptions = getOptionsForCustomQuery$7(this.$customQuery);
-	        if (queryOptions) {
-	          this.setQueryOptions(componentId, _extends({}, queryOptions, this.getAggsQuery()), false);
-	        } else this.setQueryOptions(componentId, this.getAggsQuery(), false);
-
-	        // Update custom query for RS API
-	        updateCustomQuery(this.componentId, this.setCustomQuery, this.$props, this.selectedValue);
-	        this.updateQuery({
-	          componentId: componentId,
-	          query: query
-	        });
+	        value = _e$target.value;
+	      if (Number.isNaN(value)) {
+	        if (name === 'start') {
+	          this.$data.isStartValid = false;
+	        } else {
+	          this.$data.isEndValid = false;
+	        }
+	      } else if (name === 'start' && !this.$data.isStartValid) {
+	        this.$data.isStartValid = true;
+	      } else if (name === 'end' && !this.$data.isEndValid) {
+	        this.$data.isEndValid = true;
+	      }
+	      if (this.$data.isStartValid && this.$data.isEndValid) {
+	        if (name === 'start') {
+	          this.handleChange({
+	            start: Number(value),
+	            end: this.$data.currentValue.end
+	          }, 'change');
+	        } else {
+	          this.handleChange({
+	            start: this.$data.currentValue.start,
+	            end: Number(value)
+	          }, 'change');
+	        }
 	      }
 	    }
 	  },
-	  render: function render() {
-	    var h = arguments[0];
-	    try {
-	      var dom = this.$scopedSlots["default"];
-	      var error = this.error,
-	        isLoading = this.isLoading,
-	        selectedValue = this.selectedValue;
-	      var propsToBePassed = _extends({
-	        error: error,
-	        loading: isLoading
-	      }, this.getData(), {
-	        value: selectedValue,
-	        setQuery: this.setQuery
-	      });
-	      return h("div", [dom(propsToBePassed)]);
-	    } catch (e) {
-	      return null;
-	    }
-	  },
-	  methods: {
-	    getAggsQuery: function getAggsQuery() {
-	      if (this.aggregationField) {
-	        return {
-	          aggs: getCompositeAggsQuery$5({
-	            props: this.$props,
-	            showTopHits: true,
-	            value: this.selectedValue
-	          }).aggs
-	        };
+	  watch: {
+	    defaultValue: function defaultValue(newVal, oldVal) {
+	      if (oldVal.start !== newVal.start || oldVal.end !== newVal.end) {
+	        this.handleChange(newVal);
 	      }
-	      return {};
 	    },
-	    getData: function getData() {
-	      var hits = this.hits,
-	        aggregations = this.aggregations,
-	        aggregationData = this.aggregationData,
-	        promotedResults = this.promotedResults,
-	        rawData = this.rawData;
-	      var filteredResults = parseHits$1(hits);
-	      if (promotedResults.length) {
-	        var ids = promotedResults.map(function (item) {
-	          return item._id;
-	        }).filter(Boolean);
-	        if (ids) {
-	          filteredResults = filteredResults.filter(function (item) {
-	            return !ids.includes(item._id);
-	          });
+	    value: function value(newVal, oldVal) {
+	      if (!isEqual$g(newVal, oldVal)) {
+	        if (this.isControlled()) {
+	          this.handleChange(newVal, 'change');
 	        }
-	        filteredResults = [].concat(promotedResults, filteredResults);
 	      }
-	      return {
-	        data: filteredResults,
-	        aggregationData: aggregationData,
-	        rawData: rawData,
-	        aggregations: aggregations,
-	        promotedData: promotedResults,
-	        resultStats: this.stats
-	      };
 	    }
 	  },
-	  computed: {
-	    stats: function stats() {
-	      return getResultStats$3(this);
+	  created: function created() {
+	    if (this.$props.defaultValue && this.$props.defaultValue.start && this.$props.defaultValue.end) {
+	      this.handleChange(this.$props.defaultValue);
 	    }
+	    if (this.isControlled()) {
+	      this.handleChange(this.$props.value, 'change');
+	    }
+	  },
+	  render: function render() {
+	    var h = arguments[0];
+	    var _this$$props = this.$props,
+	      className = _this$$props.className,
+	      dataField = _this$$props.dataField,
+	      range = _this$$props.range,
+	      rangeLabels = _this$$props.rangeLabels,
+	      componentId = _this$$props.componentId,
+	      innerClass = _this$$props.innerClass,
+	      stepValue = _this$$props.stepValue,
+	      componentStyle = _this$$props.componentStyle,
+	      themePreset = _this$$props.themePreset,
+	      includeNullValues = _this$$props.includeNullValues,
+	      beforeValueChange = _this$$props.beforeValueChange,
+	      customQuery = _this$$props.customQuery,
+	      data = _this$$props.data,
+	      filterLabel = _this$$props.filterLabel,
+	      react = _this$$props.react,
+	      showFilter = _this$$props.showFilter,
+	      showCheckbox = _this$$props.showCheckbox,
+	      title = _this$$props.title,
+	      URLParams = _this$$props.URLParams,
+	      sliderOptions = _this$$props.sliderOptions,
+	      nestedField = _this$$props.nestedField;
+	    return h(Container, {
+	      "style": componentStyle,
+	      "class": className
+	    }, [h(RangeConnected$3, {
+	      "attrs": {
+	        "componentId": componentId,
+	        "value": {
+	          start: this.currentValue.start,
+	          end: this.currentValue.end
+	        },
+	        "range": range,
+	        "dataField": dataField,
+	        "rangeLabels": rangeLabels,
+	        "includeNullValues": includeNullValues,
+	        "beforeValueChange": beforeValueChange,
+	        "customQuery": customQuery,
+	        "data": data,
+	        "filterLabel": filterLabel,
+	        "react": react,
+	        "showFilter": showFilter,
+	        "showCheckbox": showCheckbox,
+	        "title": title,
+	        "uRLParams": URLParams,
+	        "sliderOptions": sliderOptions,
+	        "nestedField": nestedField
+	      },
+	      "on": {
+	        "change": this.handleOnChange,
+	        "value-change": this.handleValueChange
+	      }
+	    }), h(Flex, {
+	      "class": getClassName$f(innerClass, 'input-container') || ''
+	    }, [h(Flex, {
+	      "attrs": {
+	        "direction": "column",
+	        "flex": 2
+	      }
+	    }, [h(Input, {
+	      "key": componentId + "-start-value",
+	      "attrs": {
+	        "name": "start",
+	        "type": "number",
+	        "step": stepValue,
+	        "themePreset": themePreset,
+	        "aria-label": componentId + "-start-input",
+	        "min": this.$props.range ? this.$props.range.start : 0,
+	        "alert": !this.isStartValid
+	      },
+	      "on": {
+	        "change": this.handleInputChange
+	      },
+	      "class": getClassName$f(innerClass, 'input') || '',
+	      "domProps": _extends({}, {
+	        value: this.currentValue.start
+	      })
+	    }), !this.isStartValid && h(Content, {
+	      "attrs": {
+	        "alert": true
+	      }
+	    }, ["Input range is invalid"])]), h(Flex, {
+	      "attrs": {
+	        "justifyContent": "center",
+	        "alignItems": "center",
+	        "flex": 1
+	      }
+	    }, ["-"]), h(Flex, {
+	      "attrs": {
+	        "direction": "column",
+	        "flex": 2
+	      }
+	    }, [h(Input, {
+	      "key": componentId + "-end-value",
+	      "attrs": {
+	        "name": "end",
+	        "type": "number",
+	        "step": stepValue,
+	        "themePreset": themePreset,
+	        "aria-label": componentId + "-end-input",
+	        "max": this.$props.range ? this.$props.range.end : 10,
+	        "alert": !this.isEndValid
+	      },
+	      "on": {
+	        "change": this.handleInputChange
+	      },
+	      "class": getClassName$f(innerClass, 'input') || '',
+	      "domProps": _extends({}, {
+	        value: this.currentValue.end
+	      })
+	    }), !this.isEndValid && h(Content, {
+	      "attrs": {
+	        "alert": true
+	      }
+	    }, ["Input range is invalid"])])])]);
 	  }
 	};
-	ReactiveComponent.hasInternalComponent = function (props) {
-	  return !!props.defaultQuery;
-	};
-	var mapStateToProps$f = function mapStateToProps(state, props) {
+	var mapStateToProps$f = function mapStateToProps(state) {
 	  return {
-	    aggregations: state.aggregations[props.componentId] && state.aggregations[props.componentId] || null,
-	    aggregationData: state.compositeAggregations[props.componentId] || [],
-	    hits: state.hits[props.componentId] && state.hits[props.componentId].hits || [],
-	    rawData: state.rawData[props.componentId],
-	    error: state.error[props.componentId],
-	    isLoading: state.isLoading[props.componentId],
-	    selectedValue: state.selectedValues[props.componentId] && state.selectedValues[props.componentId].value || null,
-	    promotedResults: state.promotedResults[props.componentId] || [],
-	    time: state.hits[props.componentId] && state.hits[props.componentId].time || 0,
-	    total: state.hits[props.componentId] && state.hits[props.componentId].total,
-	    hidden: state.hits[props.componentId] && state.hits[props.componentId].hidden,
-	    componentProps: state.props[props.componentId],
-	    enableAppbase: state.config.enableAppbase
+	    themePreset: state.config.themePreset
 	  };
 	};
-	var mapDispatchtoProps$b = {
-	  setQueryOptions: setQueryOptions$b,
-	  updateQuery: updateQuery$c,
-	  setCustomQuery: setCustomQuery$b,
-	  setDefaultQuery: setDefaultQuery$7
+	var RangeConnected$4 = PreferencesConsumer(ComponentWrapper$1(connect(mapStateToProps$f, {})(RangeInput), {
+	  componentType: constants_1$1.rangeInput
+	}));
+	RangeConnected$4.name = RangeInput.name;
+	RangeConnected$4.install = function (Vue) {
+	  Vue.component(RangeConnected$4.name, RangeConnected$4);
 	};
-	var ConnectedComponent = ComponentWrapper$1(connect(mapStateToProps$f, mapDispatchtoProps$b)(ReactiveComponent), {
-	  componentType: constants_1$1.reactiveComponent
-	});
-	var RcConnected = PreferencesConsumer({
+
+	// Add componentType for SSR
+	RangeConnected$4.componentType = constants_1$1.rangeInput;
+
+	var RcConnected$1 = PreferencesConsumer({
 	  name: 'RcConnected',
 	  render: function render(h) {
-	    var component = ConnectedComponent;
+	    var component = RcConnected;
 	    switch (this.$attrs.componentType) {
 	      case constants_1$1.reactiveList:
 	        component = RLConnected;
 	        break;
-	      case constants_1$1.dataSearch:
-	        component = DSConnected;
-	        break;
 	      case constants_1$1.searchBox:
 	        component = SBConnected;
 	        break;
@@ -25591,12 +25610,12 @@
 	    });
 	  }
 	});
-	RcConnected.name = ReactiveComponent.name;
-	RcConnected.hasInternalComponent = ReactiveComponent.hasInternalComponent;
+	RcConnected$1.name = 'ReactiveComponentPrivate';
+	RcConnected$1.hasInternalComponent = RcConnected.hasInternalComponent;
 	// Add componentType for SSR
-	RcConnected.componentType = constants_1$1.reactiveComponent;
-	RcConnected.install = function (Vue) {
-	  Vue.component(RcConnected.name, RcConnected);
+	RcConnected$1.componentType = constants_1$1.reactiveComponent;
+	RcConnected$1.install = function (Vue) {
+	  Vue.component(RcConnected$1.name, RcConnected$1);
 	};
 
 	var setValue$2 = lib_5.setValue,
@@ -25760,10 +25779,10 @@
 	  setValue: setValue$2,
 	  resetValuesToDefault: resetValuesToDefault
 	};
-	var RcConnected$1 = connect(mapStateToProps$g, mapDispatchtoProps$c)(SelectedFilters);
-	RcConnected$1.name = SelectedFilters.name;
-	RcConnected$1.install = function (Vue) {
-	  Vue.component(RcConnected$1.name, RcConnected$1);
+	var RcConnected$2 = connect(mapStateToProps$g, mapDispatchtoProps$c)(SelectedFilters);
+	RcConnected$2.name = SelectedFilters.name;
+	RcConnected$2.install = function (Vue) {
+	  Vue.component(RcConnected$2.name, RcConnected$2);
 	};
 
 	var ResultCardTitle = {
@@ -34821,9 +34840,9 @@
 	  });
 	}
 
-	var version = "1.33.10";
+	var version = "1.33.12";
 
-	var components$1 = [RLConnected, ResultCard, ResultList, ReactiveBase, DSConnected, SBConnected, ListConnected, ListConnected$1, RangeConnected$1, RangeConnected$2, RangeConnected$3, RangeConnected, RcConnected, RcConnected$1, TBConnected, ListConnected$2, ListConnected$3, StateProviderConnected, RangeConnected$4];
+	var components$1 = [RLConnected, ResultCard, ResultList, ReactiveBase, DSConnected, SBConnected, ListConnected, ListConnected$1, RangeConnected$1, RangeConnected$2, RangeConnected$3, RangeConnected, RcConnected, RcConnected$1, RcConnected$2, TBConnected, ListConnected$2, ListConnected$3, StateProviderConnected, RangeConnected$4];
 	function install (Vue) {
 	  components$1.map(function (component) {
 	    Vue.use(component);
@@ -34849,12 +34868,13 @@
 	exports.RangeSlider = RangeConnected$3;
 	exports.ReactiveBase = ReactiveBase;
 	exports.ReactiveComponent = RcConnected;
+	exports.ReactiveComponentPrivate = RcConnected$1;
 	exports.ReactiveGoogleMap = ReactiveGoogleMap;
 	exports.ReactiveList = RLConnected;
 	exports.ResultCard = ResultCard;
 	exports.ResultList = ResultList;
 	exports.SearchBox = SBConnected;
-	exports.SelectedFilters = RcConnected$1;
+	exports.SelectedFilters = RcConnected$2;
 	exports.SingleDropdownList = ListConnected$2;
 	exports.SingleList = ListConnected;
 	exports.SingleRange = RangeConnected$1;