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 =
;;;Component { superprops; thisfeatureRef = React; thischangeStartHandler = thischangeStartHandler; thistimeChangeHandler = thistimeChangeHandler; thischangeCompleteHandler = thischangeCompleteHandler; thisstate = value: start: "00:00" end: "23:59" } { console; } { this; } { console; } { return<div> <TimeRangeSlider disabled=false format=24 maxValue="23:59" minValue="00:00" name="time_range" onChangeStart=thischangeStartHandler onChangeComplete=thischangeCompleteHandler onChange=thistimeChangeHandler step=15 value=thisstatevalue/> </div>; }; ;
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"}