Skip to main content

Range Slider React Component

User Story: #155911084

We need a range slider component for the PPM Incentives screen. This needs to be

  • accessible
  • styleable
  • responsive

Considered Alternatives​

Decision Outcome​

  • Chosen Alternative: react-rangeslider
  • It was the only one that would build, was controllable by keyboard, and looked decent with USWDS CSS

Pros and Cons of the Alternatives ​

react-rangeslider​

  • + it worked
  • + supported keyboard controls
  • - examples require component state

rc-slider​

  • + it worked
  • - could only be controlled with mouse

rheostat​

  • + AirBnb created
  • + documentation seemed nice
  • - even storybook they deliver has broken styles
  • - *layout was unusable with uswds styles

rea11y-sliders​

  • - would not compile

react-html5-slider​

  • - would not compile