New Range Filter Component

[jorgenherje]

Create component for filtering among list of integers - i.e. create ranges

Feature request came when wanting to filter among list of realization numbers in a webviz-subsurface-plugin.

The Volumetrics-plugin has such filtering functionality, but callback functionality can become complex. To simplify usage of such filtering, a React-component can be considered.

---

Possible Solution

• Input TextField
• RangeSlider
• List with selectable elements (e.g. reuse wcc.Select where delay time is added?)

Allow each component to edit the selected elements from list, if the range slider is selected, only one range is valid. If the list is selected, multiple ranges can be selected. The input TextField can be edited as well, and will modify values/selections in the RangeSlider and List. Can add delay on props update to prevent callbacks immediately after edit.

Input:

• Initially selected items
• Configurable if the filter should be exclude or include the selected values

Output:

• List of the selected elements (not ranges, list of each selected element)

---

Print screen from Volumetrics-plugin

---

Additional context

Consider if wcc.Select should have some sort of delay, as callbacks fire fairy quickly during interaction with current solution. Can have "edit"-mode where props are not updated before edit mode timer has timed out?

Feature request created: https://github.com/equinor/webviz-core-components/issues/195

[rubenthoms]

Another suggestion could be the following component design with multiple single-value and range selections in a single slider: https://www.figma.com/file/wg5OpOtyZ2mPCaK8IUYcf8/Range-Filter-Component?node-id=0%3A1