Timline-style Draggable Range Slider For React

A draggable, horizontal, timeline-style range slider component for React.

Install & Import:

# NPM
$ npm i react-timeline-range-slider --save

import React from 'react'  
import { endOfToday, format, set } from 'date-fns' 
import TimeRange from 'react-timeline-range-slider'

Basic Usage:

import {
  selectedInterval,
  disabledIntervals,
  timelineInterval
} from "./datesSource";
import "./styles.scss";
class App extends React.Component {
  state = {
    error: false,
    selectedInterval
  };
  errorHandler = ({ error }) => this.setState({ error });
  onChangeCallback = selectedInterval => this.setState({ selectedInterval });
  render() {
    const { selectedInterval, error } = this.state;
    return (
      <div className="container">
        <div className="info">
          <span>Selected Interval: </span>
          {selectedInterval.map((d, i) => (
            <span key={i}>{format(d, "dd MMM, HH:mm")}</span>
          ))}
        </div>
        <TimeRange
          error={error}
          ticksNumber={36}
          selectedInterval={selectedInterval}
          timelineInterval={timelineInterval}
          onUpdateCallback={this.errorHandler}
          onChangeCallback={this.onChangeCallback}
          disabledIntervals={disabledIntervals}
        />
      </div>
    );
  }
}
export default App;

Default props.

selectedInterval: [
  set(new Date(), { minutes: 0, seconds: 0, milliseconds: 0 }),
  set(addHours(new Date(), 1), { minutes: 0, seconds: 0, milliseconds: 0 })
],
timelineInterval: [startOfToday(), endOfToday()],
disabledIntervals: [],
step: 1000*60*30,
ticksNumber: 48,
error: false,

Preview:

Download Details:

Author: lizashkod

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/lizashkod/react-timeline-range-slider

License: MIT