A Timeline Slider for React

Downloads in past


0.0.47 years ago7 years agoMinified + gzip package size for react-timeline-slider in KB


React Timeline
A Timeline Slider for React.


  range={[2010, 2011, 2012]}
  height: "40" />


The recommended way to install react-timeline-slider is through npm (with browserify, webpack or a similar bundler)
npm install react-timeline-slider

Alternatively, you can copy the react-timeline-slider directory inside dist and use it in your RequireJS project. You will need to set it as a package:
  "packages": ["react-timeline-slider"]

Feel free to check the RequireJS example.

Contributing and running examples

First, clone the repository
git clone

Install the dependencies
cd react-timeline-slider
npm install

You can then build the development bundle:
npm run build

Start the http-server to take a look at or modify the examples:
npm run server

Keep gulp watching changes on the background and rebuilding:
npm run watch

Or just do all of them at once with:
npm start

The development bundle bundles all the dependencies (including React itself) and exposes the globals React and ReactDOM to make things easier for everyone.
The examples should be available at http://localhost:8080/example/examples/<example>.html


$background-color: 'gray';
$handler-color: 'blue';
$connector-color: 'green';

.react-timeline-slider {
  &__background {
    fill: $background-color;

  &__tick-point {
    r: 2;

  &__tick-text {
    font-size: 10px;

  &__handler {
    r: 7;
    fill: $handler-color;
    transition: r 0.4s;

    &:hover {
      fill: darken($handler-color, 12%);

    &:active {
      r: 9;

  &__line-between-handlers {
    stroke: $connector-color;
    stroke-width: 4px;

  &__control-bg {
    fill: rgba(170, 170, 170, 0.7);

  &__control-button {
    fill: rgb(255, 255, 255);

  &__control-pause {
    fill: rgb(148, 57, 57);

  &__control-play {
    fill: rgb(131, 240, 132);