React Timeline

A Timeline Slider for React.

Usage

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

Installation

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:

require.config({
  "packages": ["react-timeline-slider"]
});

Feel free to check the RequireJS example.

Contributing and running examples

First, clone the repository

git clone [email protected]:ecostage/react-timeline-slider.git

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

Styling

$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);
  }
}