New Component: DynamicRangeSlider

[siddharthlatest]

Like RangeSlider but decides its range based on the underlying data, i.e. dynamically.

Component Props

• componentId String
  component ID.
• appbaseField String
  DB field to be mapped with UI for querying. Should be numeric.
• title String
  title of the component, optional.
• rangeLabels Function [optional]
  takes a function(start_val, end_val) and returns an object in the format:

{
  "start": "start label",
  "end": "end label"
}

• defaultSelected Function [optional]
  takes a function(start_val, end_val) and returns an object in the format:

{
  "start": 0,
  "end": 10
}

• showHistogram Boolean
  whether to show the histogram. Defaults to true.
• stepValue Number
  step value specifies the slider stepper. Value should be an integer between 1 and floor(#total-range/2). Defaults to 1.

CSS Styles API

rbc-histogram-active
rbc-rangelabels-active
rbc-title-active

Stories

1. Basic story
2. Story with passing labels via a function
3. With default selected
4. With a different step value than 1
5. In a dark theme
6. Playground.

[metagrover]

Added here: cb01a8b 0a85a4a bf1c543