Skip to content

ReactTimeRangeSlider 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.

License

Notifications You must be signed in to change notification settings

ashvin27/react-time-range-slider

Repository files navigation

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

  • disabled: false
  • draggableTrack: false
  • format: 24
  • maxValue: 23:59
  • minValue: 00:00
  • name:
  • step: 15
  • value: {start: "00:00", end: "23:59"}

About

ReactTimeRangeSlider 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.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published