React Rangefilter

React UI component for filtering linearly arranged data. The layout is comprised of two areas of interest: the range-browser and the focus-tray. The bounds-sliders determine the start and end of the browsed range which is then displayed across the entire width of the focus-tray. The range is a colleciton of objects arranged by a sort-value, and is automatically sorted by string or number. The focus-tray is updated each time a bounds-slider position is changed.

Features

• Full React/Flux pattern
• Minimal dependencies (lodash, react-draggable)
• Callbacks for onClick and onChange
• Fluid layout
• CSS Rich

Try it

See the demo at http://www.uismithing.com/main/rangefilter.

Repository

https://github.com/uismithing/react-rangefilter

Install

npm install react-rangefilter -s

Deploy

import Rangefilter from "react-rangefilter"

<Rangefilter {...props}/>

props

• Panel:{}
• Panelintervals:{}
• Scopetrack:{}
• Focustray:{}
• Leftbound:{}
• Rightbound:{}
• Change:=>
• Click:=>
• Range:[{},...{}]