react-time-range-slider

react-time-range-slider is a React component allowing users to integrate time range slider. It can accept start and end time. It also allow to define time format default 24 hour time format

Demo

A running demo is available here

Installation

With npm installed, run

npm install react-time-range-slider

Usage

var TimeRangeSlider = require('react-time-range-slider') 
import React from 'react'; import { render} from 'react-dom'; import TimeRangeSlider from 'react-time-range-slider'; class App extends React.Component{ constructor(props) { super(props); this.featureRef = React.createRef(); this.changeStartHandler = this.changeStartHandler.bind(this); this.timeChangeHandler = this.timeChangeHandler.bind(this); this.changeCompleteHandler = this.changeCompleteHandler.bind(this); this.state = { value: { start: "00:00", end: "23:59" } } } changeStartHandler(time){ console.log("Start Handler Called", time); } timeChangeHandler(time){ this.setState({ value: time }); } changeCompleteHandler(time){ console.log("Complete Handler Called", time); } render() { return(<div> <TimeRangeSlider disabled={false} format={24} maxValue={"23:59"} minValue={"00:00"} name={"time_range"} onChangeStart={this.changeStartHandler} onChangeComplete={this.changeCompleteHandler} onChange={this.timeChangeHandler} step={15} value={this.state.value}/>  </div>);  } }; render(<App />, document.getElementById("app"));

API

Options(props)

disabled: boolean

If this property is set to true, your component is disabled. This means you’ll not able to interact with it.

draggableTrack: boolean

If this property is set to true, you can drag the entire track.

format: number

How times should be displayed. Possible values 12|24.

maxValue: string

Set a maximum value for your component. You cannot drag your slider beyond this value.

minValue: string

Set a minimum value for your component. You cannot drag your slider under this value.

name: string

Set a name for your form component.

onChange: Function(Range): void

Whenever your user interacts with your component (i.e.: dragging a slider), this function gets called. Inside the function, you should assign the new value to your component.

onChangeStart: Function(Range): void

Whenever your user starts interacting with your component (i.e.: onMouseDown, or onTouchStart), this function gets called.

onChangeComplete: Function(Range): void

Every mouse / touch event can trigger multiple updates, therefore causing onChange callback to fire multiple times. On the other hand, onChangeComplete callback only gets called when the user stops dragging.

step: number

The amount of time, in minutes, increment/decrement when time range change.

value: Range

Set the current value for your component

Defaults