react-time-seek-slider
Youtube-like time seek slider for React. Fork of react-video-seek-slider for enhancements like:
- onSeeking callback gets time with millisecond precision
- Seek event fires immediately on mousedown and touchstart
- Thumb dragging does not cause text selection
- Time tooltip shows correct time text for time smaller than 60
- Time tooltip stays inside left and right boundary of the seek track
- Events: onSeeking, onSeekend
Video seek slider demo react-video-seek-slider
How to install
npm i react-time-seek-slider
How to import
For TypeScript usage there is a index.d.ts in node_modules folder
;
or
const TimeSeekSlider = ;
Also you have to use css file in a lib folder in:
;
How to use
//JSX <TimeSeekSlider = = = = = ="00:00:" ="00:" />
Specification
max
(number, required) - Max sliders valuecurrentTime
(number, required) - Current sliders valueprogress
(number) - Current buffered progresshideSeekTimes
(boolean) - hide hover current time (Default: false)onSeeking
((time:number, offsetTime:number)=>void, required) - script to be run when thumb changes positiononSeekend
(()=>void, default: null) - script to be run when thumb change endsoffset
(number, default:0) - when you need start slider with offset timesecondsPrefix
(string, default: '') - when time is less than one minutes you can use prefix time as "00:00:"minutesPrefix
(string, default: '') - when time is less than one hour you can use prefix time as "00:"
For development
just use:
$ yarn or $ npm i$ npm run dev
open your browser http://localhost:3000
For Build
$ npm run production