react-timeline-slider

A Timeline Slider for React

Stats

StarsIssuesVersionUpdatedCreatedSize
react-timeline-slider
0.0.46 years ago6 years agoMinified + gzip package size for react-timeline-slider in KB

Readme

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 git@github.com: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);
  }
}

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.