@netless/react-seek-slider
TypeScript icon, indicating that this package has built-in type declarations

1.0.4 • Public • Published

@netless/seek-slider

a seek slider

NPM JavaScript Style Guide

1. 说明

本项目技术选型为:React Typescript 打包工具为: rollup

2. 安装

npm install --save @netless/seek-slider

或者

yarn add @netless/seek-slider

3. 接口说明

参数 说明 类型 默认值
fullTime 总时长 number
currentTime 目前时间 number
onChange 变化回调 (time: number, offsetTime: number) => void
offset 起始时间 number 0
bufferProgress? buffer 进度 number
hideHoverTime? 是否开启 hover 显示时间功能 boolen false
secondsPrefix? 秒的显示 string "00:"
minutesPrefix? 分的显示 string "00:"
limitTimeTooltipBySides? 三方按钮插入的位置 boolean
sliderColor? 进度条颜色 string
sliderHoverColor? hover 显示的进度条颜色 string
thumbColor? thumb 颜色 string
bufferColor? buffer 的颜色 string

4. 使用概览

import * as React from "react";
import ToolBox from "@netless/react-tool-box";

export default class ToolBoxExample extends React.Component<{}, {}> 
  render () {
    return (
      <SeekSlider
          // 全部时间
         fullTime={player.timeDuration}
          // 目前时间
         currentTime={this.getCurrentTime(this.state.currentTime)}
          // 时间变化的回调
         onChange={(time: number, offsetTime: number) => {
             if (this.state.player) {
                 this.setState({currentTime: time});
                this.state.player.seekToScheduleTime(time);
             }
         }}
         // hover 显示时间
         hideHoverTime={true}
         limitTimeTooltipBySides={true}
        />
    )
  }
}

5. 启动项目

  1. 获取源码

    git clone git@github.com:netless-io/netless-react-seek-slider.git
  2. 进入项目并安装库文件依赖

    cd netless-react-seek-slider
    yarn
  3. 启动库文件项目

        yarn start
  4. 进入项目并安装 example 文件依赖

        cd example
        yarn
  5. 启动 example 项目

        yarn start

6. 项目截图

slider

License

MIT © wushuang

Readme

Keywords

none

Package Sidebar

Install

npm i @netless/react-seek-slider

Weekly Downloads

38

Version

1.0.4

License

MIT

Unpacked Size

104 kB

Total Files

9

Last publish

Collaborators

  • hqer
  • vince-hz
  • hyrious
  • huaguzheng