RangeInput
RangeInput
creates a numeric range slider UI component with input fields. It works in the same way as RangeSlider.
Example uses:
- filtering products from a price range in an e-commerce shopping experience.
- filtering flights from a range of departure and arrival times.
Usage
Basic Usage
<RangeInput
componentId="RangeInputComponent"
dataField="rating"
title="Ratings"
range={{
"start": 3000,
"end": 50000
}}
/>
RangeInput
provides all the props supported by RangeSlider.
Usage With All Props
<RangeInput
componentId="RangeInputSensor"
dataField="rating"
title="Ratings"
range={{
"start": 3000,
"end": 50000
}}
defaultValue={{
"start": 4000,
"end": 10000
}}
rangeLabels={{
"start": "Start",
"end": "End"
}}
showFilter={true}
stepValue={1}
showHistogram={true}
interval={2}
react={{
and: ["CategoryFilter", "SearchFilter"]
}}
URLParams={false}
/>
Props
- componentId
String
unique identifier of the component, can be referenced in other components’react
prop. - dataField
String
DB data field to be mapped with the component’s UI view. The selected range creates a database query on this field. - range
Object
an object withstart
andend
keys and corresponding numeric values denoting the minimum and maximum possible slider values. - nestedField
String
[optional] use to set thenested
mapping field that allows arrays of objects to be indexed in a way that they can be queried independently of each other. Applicable only when dataField is a part ofnested
type. - title
String or JSX
[optional] title of the component to be shown in the UI. - defaultValue
Object
[optional] selects a initial range values usingstart
andend
key values from one of the data elements. - value
Object
[optional] controls the current value of the component.It selects the data from the range (on mount and on update). Use this prop in conjunction withonChange
function. - onChange
function
[optional] is a callback function which accepts component’s current value as a parameter. It is called when you are using thevalue
prop and the component’s value changes. This prop is used to implement the controlled component behavior. - rangeLabels
Object
[optional] an object withstart
andend
keys and correspondingString
labels to show labels near the ends of theRangeInput
component. - showFilter
Boolean
[optional] show the selected item as a filter in the selected filters view. Defaults totrue
. - snap
Boolean
[optional] makes the slider snap on to points depending on thestepValue
when the slider is released. Defaults totrue
. When set tofalse
,stepValue
is ignored. - stepValue
Number
[optional] step value specifies the slider stepper. Value should be an integer greater than or equal to1
and less thanMath.floor((range.end - range.start) / 2)
. Defaults to 1. - showHistogram
Boolean
[optional] whether to display the range histogram or not. Defaults totrue
. - interval
Number
[optional] set the histogram bar interval, applicable when showHistogram istrue
. Defaults toMath.ceil((props.range.end - props.range.start) / 100) || 1
. - URLParams
Boolean
[optional] 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 tofalse
.
Demo
Styles
RangeInput
component supports innerClass
prop with the following keys:
slider-container
input-container
The other innerClass
properties are the same as supported by RangeSlider.
Extending
RangeInput
component can be extended to
- customize the look and feel with
className
,style
, - update the underlying DB query with
customQuery
, - connect with external interfaces using
beforeValueChange
,onValueChange
andonQueryChange
, - filter data using a combined query context via the
react
prop.
<RangeInput
...
className="custom-class"
style={{"paddingBottom": "10px"}}
customQuery={
function(value, props) {
return {
query: {
match: {
data_field: "this is a test"
}
}
}
}
}
beforeValueChange={
function(value) {
// called before the value is set
// returns a promise
return new Promise((resolve, reject) => {
// update state or component props
resolve()
// or reject()
})
}
}
onValueChange={
function(value) {
console.log("current value: ", value)
// set the state
// use the value with other js code
}
}
onQueryChange={
function(prevQuery, nextQuery) {
// use the query with other js code
console.log('prevQuery', prevQuery);
console.log('nextQuery', nextQuery);
}
}
react={{
"and": ["ListSensor"]
}}
/>
- className
String
CSS class to be injected on the component container. - style
Object
CSS styles to be applied to the RangeInput component. - customQuery
Function
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 ofreact
dependency of at least one other component. - beforeValueChange
Function
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. - onValueChange
Function
is a callback function which accepts component’s current value as a parameter. It is called everytime the component’s value changes. This prop 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. - onQueryChange
Function
is a callback function which accepts component’s prevQuery and nextQuery as parameters. It is called everytime the component’s query changes. This prop is handy in cases where you want to generate a side-effect whenever the component’s query would change. -
react
Object
specify dependent components to reactively update RangeInput’s data view.-
key
String
one ofand
,or
,not
defines the combining clause.- and clause implies that the results will be filtered by matches from all of the associated component states.
- or clause implies that the results will be filtered by matches from at least one of the associated component states.
- not clause implies that the results will be filtered by an inverse match of the associated component states.
-
value
String or Array or Object
String
is used for specifying a single component by itscomponentId
.Array
is used for specifying multiple components by theircomponentId
.Object
is used for nesting other key clauses.
-
Examples
See more stories for RangeInput on playground.