RangeInput

<template>
	<range-input
		dataField="ratings_count"
		componentId="BookSensor"
		title="RangeInput: Ratings"
		:range="{
			start: 3000,
			end: 50000
      }"
	/>
</template>

<template>
	<range-input
		componentId="RatingsSensor"
		compoundClause="filter"
		dataField="ratings_count"
		:range="{
			start: 3000,
			end: 50000,
		}"
		:rangeLabels="{
			start: '3K',
			end: '50K',
		}"
		:defaultValue="{
			start: 10000,
			end: 30000
		}"
		title="Ratings Filter"
		:stepValue="1"
		:includeNullValues="true"
		className="component-wrapper"
		:validateRange="validateInputChange"
		:value="this.$data.currentValue"
		@change="handleChange"
		@value-change="handleValueChange"
		:endpoint="{
			url:'https://appbase-demo-ansible-abxiydt-arc.searchbase.io/recipes-demo/_reactivesearch.v3',
			headers: {
				// put relevant headers
			},
			method: 'POST'
		}"		
	/>
</template>

<template>
	<range-input
		:validateRange="([start, end]) => {
            if(start <= end) {
                return true;
            }
            return false;
        }"
	/>
</template>

an object with `start` and `end` keys and corresponding `String` labels to show labels near the ends of the `RangeInput` component.

show the selected item as a filter in the selected filters view. Defaults to `true`.

makes the slider snap on to points depending on the `stepValue` when the slider is released. Defaults to `true`. When set to `false`, `stepValue` is ignored.

step value specifies the slider stepper. Value should be an integer greater than or equal to `1` and less than `Math.floor((range.end - range.start) / 2)`. Defaults to 1.

enable creating a URL query string parameter based on the selected value of the list. This is useful for sharing URLs with the component state. Defaults to `false`.

If you have sparse data or document or items not having the value in the specified field or mapping, then this prop enables you to show that data. Defaults to `false`.

<template>
	<range-input
		className="custom-class"
		:customQuery="getCustomQuery"
		:react="react"
		:beforeValueChange="handleBeforeValueChange"
		@valueChange="handleValueChange"
		@queryChange="handleQueryChange"
	/>
</template>
<script>
	export default {
		name: 'app',
		methods: {
			getCustomQuery: (value, props) => {
				return {
					query: {
						match: {
							price: 1000,
						},
					},
				};
			},
			handleBeforeValueChange: value => {
				// called before the value is set
				// returns a promise
				return new Promise((resolve, reject) => {
					// update state or component props
					resolve();
					// or reject()
				});
			},
			handleValueChange: value => {
				console.log('current value: ', value);
				// set the state
				// use the value with other js code
			},
			handleQueryChange: (prevQuery, nextQuery) => {
				// use the query with other js code
				console.log('prevQuery', prevQuery);
				console.log('nextQuery', nextQuery);
			},
		},
		computed: {
			react() {
				return {
					and: ['pricingFilter', 'dateFilter'],
					or: ['searchFilter'],
				};
			},
		},
	};
</script>

CSS class to be injected on the component container.

takes **value** and **props** as parameters and **returns** the data query to be applied to the component, as defined in Elasticsearch Query DSL.

> Note:
> customQuery is called on value changes in the **RangeInput** component as long as the component is a part of
>`react` dependency of at least one other component.

is a callback function which accepts component's future **value** as a parameter and **returns** a promise. It is called everytime before a component's value changes. The promise, if and when resolved, triggers the execution of the component's query and if rejected, kills the query execution. This method can act as a gatekeeper for query execution, since it only executes the query after the provided promise has been resolved. For example,

```js
beforeValueChange = value => {
	// The update is accepted by default
	if (value.start > 3000) {
		// To reject the update, throw an error
		throw Error('Start value must be less than or equal to 3000.');
	}
};
```

is an event which accepts component's **prevQuery** and **nextQuery** as parameters. It is called everytime the component's query changes. This event is handy in cases where you want to generate a side-effect whenever the component's query would change.

is an event which accepts component's current **value** as a parameter. It is called everytime the component's value changes. This event is handy in cases where you want to generate a side-effect on value selection.For example: You want to show a pop-up modal with the valid discount coupon code when some range is selected in a “Discounted Price” RangeInput.

is an event which accepts component's current **value** as a parameter. It is called when you are using the value prop and the component's value changes.

<template>
    <range-input
        // ...other props
        value="value"
        @change="handleChange"
    />
</template>

<script>
export default {
  name: 'app',
    data() {
        return {
            value: {
  			  start: 3000,
  			  end: 50000
  		  }
        }
    },
    methods: {
        handleChange(value) {
            this.value = value;
        }
    }
};
</script>