Create histogram style filter component

[alexluscombe]

Create a histogram style filter component. e.g. see price filtering component on Airbnb search results page. Component should include all the functionality from the AIrbnb version.

Component should allow the user to see the distribution of values of a particular field and allow them to narrow results by dragging the handles at the upper and lower ends of the slider. Slider handles should not be allowed to cross over one and other.

As the handles are dragged along the slider the user should be able to see how they are changing the filter values. A Clear button should reset the component to its original state. An apply button should run the search with the new parameters set.

[zlatanpham]

Hey @alexluscombe, I've made a prototype for the component, available to check here. Can you take a look to see whether its behaviors meet your need? (note: just for desktop, not support touch for mobile yet).

[mish15]

@zlatanpham nice! Would be good to be able to set a different colour for the selected region of the histogram. Also would be good to get the mobile drag working if possible also?

[zlatanpham]

@mish15 you meant color of the highlighted area on the attachment could be changed?

For the mobile drag support, no worries, I did complete the feature yesterday.

[mish15]

@zlatanpham yes exactly. I would guess normally the selected area would be coloured and the areas outside would be greyed out. Probably useful to be able to set both though

[zlatanpham]

@mish15 👍 I'll post the demo once completed.

[zlatanpham]

@mish15 here is the update.

[mish15]

Cool perfect!

[alexluscombe]

Hi @zlatanpham We're happy with the prototype. Can you create a PR for @benhinchley to review?

[zlatanpham]

Okay