react-slider-times

react-slider-times，是一款基于react开发的卡尺滑动时间段选取组件，界面简洁大方，支持时间段间隔、时长设置。

install

npm i react-slider-times

usage

import SliderTime from 'react-slider-time';
import 'react-slider-times/dist/sliderTime.css';

cosnt sliderTimeRef = useRef(null);
<SliderTime interval={10} space={120} onChange={times => {}} ref={sliderTimeRef}/>

props

• interval: 时间段之间的间隔分钟数。
• space: 时间段的时长分钟时。
• onChange: 首次的初始时间或改变时间后回调，参数tiems是当前改变后返回的时间段数据。

methods

组件下的方法调用：

• addTimeSlice：sliderTimeRef.current?.addTimeSlice();
• removeTimeSlice：sliderTimeRef.current?.removeTimeSlice(id); // 参数：当前时间段的id
• changeTimeSlice：sliderTimeRef.current?.changeTimeSlice(id, ['01:20', '04:20']); // 参数：当前修改时间段id，修改成的时间段数组[开始时间， 结束时间]