# Range Components
A Suite of UI Components which render ranges in various ways and can be passed to some Searchkit components to change their range appearance.

<img src="./assets/range-components.png" />

Currently works for `RangeFilter` using the `rangeComponent` prop

## RangeSliderHistogram

RangeFilter's default style

<img src="./assets/range-slider-histogram.png"/>

## RangeSliderHistogramInput

Full-featured range component with a slider, histogram, and input. All other current range components are slimmed-down versions of this one.

<img src="./assets/range-slider-histogram-input.png"/>

## RangeInput

Range component containing only min/max input fields. Requires pressing "Go" to update the filter.

<img src="./assets/range-input.png"/>

## RangeSlider

Simple slider, using `rc-slider`. Updates the filter when the handle is released. 

<img src="./assets/range-slider.png"/>

## RangeHistogram

Renders a histogram with no filtering possibilities.

<img src="./assets/range-histogram.png"/>

## RangeSliderInput

<img src="./assets/range-slider-input.png"/>

## RangeHistogramInput

<img src="./assets/range-histogram-input.png"/>

## Compatible parent components

##### RangeFilter

Works with all range components