react-rangefilter

1.0.43 • Public • Published

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:[{},...{}]

Package Sidebar

Install

npm i react-rangefilter

Weekly Downloads

16

Version

1.0.43

License

MIT

Last publish

Collaborators

  • uismithing