I build effective, user-friendly web experiences

React component

react-simple-range

npm version
travis build
This is a simple React slider component used for inputting a number within a range, a la HTML5 input type=”range”.

My aim was to keep it simple and lightweight while progressively adding useful features, largely in the form of props which allow users to customise the slider, eg:

  • Custom min, max and step values
  • Custom slider size
  • Toggle a value label
  • Change the slider colours
  • Pass down a custom thumb element

The component was developed in ES6 and compiled to ES5 by Babel for release as an NPM package. I’m using semantic-release, Travis CI and commitizen for meaningful commit messages, semantic versioning, continuous integration, automated package publishing and releases.

Includes some basic tests with Mocha, Expect and Enzyme but I’m aiming to increase test coverage in future.