Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

License

NotificationsYou must be signed in to change notification settings

lizashkod/react-timeline-range-slider

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

50 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

demo gif

Installation

 npm i react-timeline-range-slider

Props

PropTypeDefaultDescription
timelineIntervalarray[startOfToday(), endOfToday()]Interval to display
selectedIntervalarray[new Date(), addHours(new Date(), 1)]Selected interval inside the timeline
disabledIntervalsarray[]Array of disabled intervals inside the timeline
containerClassNamestringClassName of the wrapping container
stepnumber1800000Number of milliseconds between steps (the default value is 30 minutes)
ticksNumbernumber48Number of steps on the timeline (the default value is 30 minutes)
errorboolfalseIs the selected interval is not valid
modeint/function3The interaction mode. Value of 1 will allow handles to cross each other. Value of 2 will keep the sliders from crossing and separated by a step. Value of 3 will make the handles pushable and keep them a step apart. ADVANCED: You can also supply a function that will be passed the current values and the incoming update. Your function should return what the state should be set as.
formatTickfunctionms => format(new Date(ms), 'HH:mm')Function that determines the format in which the date will be displayed
onUpdateCallbackfunction
onChangeCallbackfunction

Example

Live demo

importReactfrom'react'import{endOfToday,set}from'date-fns'importTimeRangefrom'react-timeline-range-slider'constnow=newDate()constgetTodayAtSpecificHour=(hour=12)=>set(now,{hours:hour,minutes:0,seconds:0,milliseconds:0})constselectedStart=getTodayAtSpecificHour()constselectedEnd=getTodayAtSpecificHour(14)conststartTime=getTodayAtSpecificHour(7)constendTime=endOfToday()constdisabledIntervals=[{start:getTodayAtSpecificHour(16),end:getTodayAtSpecificHour(17)},{start:getTodayAtSpecificHour(7),end:getTodayAtSpecificHour(12)},{start:getTodayAtSpecificHour(20),end:getTodayAtSpecificHour(24)}]classAppextendsReact.Component{state={error:false,selectedInterval:[selectedStart,selectedEnd],}errorHandler=({ error})=>this.setState({ error})onChangeCallback=selectedInterval=>this.setState({ selectedInterval})render(){const{ selectedInterval, error}=this.statereturn(<TimeRangeerror={error}ticksNumber={36}selectedInterval={selectedInterval}timelineInterval={[startTime,endTime]}onUpdateCallback={this.errorHandler}onChangeCallback={this.onChangeCallback}disabledIntervals={disabledIntervals}/>)}}exportdefaultApp

Releases

No releases published

Packages

No packages published

Contributors3

  •  
  •  
  •  

[8]ページ先頭

©2009-2025 Movatter.jp