timerange-input-slider

timerange-input-slider is a fixed version of the react-time-range-slider, that was missing a function to set step value.

Installation

With npm installed, run

npm install timerange-input-slider

Usage

var TimeRangeSlider = require('timerange-input-slider')

import React, { Component } from 'react';
import TimeRangeSlider from 'timerange-input-slider';
class App extends Component {
    
        state = {
            value: {
                start: "00:00",
                end: "23:59"
            }
        }
    
    changeStartHandler = (time) => {
        //
    }
    
    timeChangeHandler = (time) => {
        this.setState({
            value: time
        });
    }
    
    changeCompleteHandler = (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"}