# @netless/react-seek-slider

> a seek slider

Latest version **1.0.4** (published 2019-05-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install @netless/react-seek-slider
pnpm add @netless/react-seek-slider
yarn add @netless/react-seek-slider
bun add @netless/react-seek-slider
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2019-05-25 |
| First published | 2019-05-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 101.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | wushuang |
| Maintainers | netless-rick |

## Links

- npm: https://www.npmjs.com/package/@netless/react-seek-slider
- npm.io page: https://npm.io/package/@netless/react-seek-slider

## Recent versions

- 1.0.4 (latest) — 2019-05-25
- 1.0.3 — 2019-05-19
- 1.0.1 — 2019-05-18
- 1.0.0 — 2019-05-08

## README

# @netless/seek-slider

> a seek slider

[![NPM](https://img.shields.io/npm/v/@netless/seek-slider.svg)](https://www.npmjs.com/package/@netless/seek-slider) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)



## 1. 说明

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



## 2. 安装

```bash
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. 使用概览

```tsx
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. 获取源码

    ```bash
    git clone git@github.com:netless-io/netless-react-seek-slider.git
    ```

2. 进入项目并安装库文件依赖

    ```bash
    cd netless-react-seek-slider
    yarn
    ```

3. 启动库文件项目

    ```bash
        yarn start
    ```

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

    ```bash
        cd example
        yarn
    ```

5. 启动 `example` 项目

    ```bash
        yarn start
    ```

## 6. 项目截图

![slider](https://ohuuyffq2.qnssl.com/WeChat9c5904e21b183e907841753055f7d650.png)

## License

MIT © [wushuang](https://github.com/wushuang)

---
_Source: https://npm.io/package/@netless/react-seek-slider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._