# rc-simple-slider

> React simple slider component

Latest version **0.1.3** (published 2022-10-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install rc-simple-slider
pnpm add rc-simple-slider
yarn add rc-simple-slider
bun add rc-simple-slider
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2022-10-06 |
| First published | 2022-10-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 108.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | aparasolTree |
| Maintainers | xlws-js |
| Keywords | react, react component, slider |

## Links

- npm: https://www.npmjs.com/package/rc-simple-slider
- Repository: https://github.com/aparasolTree/rc-simple-slider
- Homepage: https://github.com/aparasolTree/rc-simple-slider#readme
- Issues: https://github.com/aparasolTree/rc-simple-slider/issues
- npm.io page: https://npm.io/package/rc-simple-slider

## Dependencies (1)

- [styled-components](https://npm.io/package/styled-components.md) ^5.3.6

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.3 (latest) — 2022-10-06
- 0.1.2 — 2022-10-05
- 0.1.1 — 2022-10-05
- 0.1.0 — 2022-10-05

## README

# rc-simple-slider

简单滑块组件

## 用法

```tsx
import { Slider } from "rc-simple-slider";

export default function App() {
    return (
        <div>
            <Slider />
        </div>
    );
}
```

## 属性

| Name                | Type                       | Default                               | Description |
|---------------------|----------------------------|---------------------------------------|-------------|
|step                 | number                     | 100                                   | 步长        |
|width                | number                     | vertical 为 true 时 6，为 false 时 300 | 宽度        |
|height               | number                     | vertical 为 true 时 300，为 false 时 6 | 高度        |
|showTip              | boolean                    | false                                 | 是否显示提示 |
|vertical             | boolean                    | false                                 | 垂直模式    |
|disabled             | boolean                    | false                                 | 是否禁用    |
|tipBgColor           | string                     | #333                                  | 提示背景颜色|
|tipFtColor           | string                     | #fff                                  | 提示字体颜色|
|contentContainerStyle| object                     | {}                                    | 容器样式    |
|progressBarColor     | string                     | #686de0                               | 进度条颜色  |
|range                | number or [number, number] | 0                                     | 选择范围    |
|showStops            | boolean                    | false                                 | 是否显示间断点 |
|marks                | object                     |         | 标记， key 的类型必须为 number 且取值在闭区间 0-100 内，每个标记可以单独设置样式 |
|debounce             | number                     |         | 去抖延迟，毫秒，仅 onInput 有用 |
|tipFormat            | Function                   | noop    | 提示信息格式化 |
|ariaValuetextFormat  | Function                   | noop    | 显示屏幕阅读器的 aria-valuenow 属性的格式化 |
|children             | Function                   |         | 替代默认的 button |
|onInput              | Function                   | noop    | 值改变时触发 |
|onChange             | Function                   | noop    | 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）|

## example

### vertical
```tsx
import { Slider } from "rc-simple-slider";

export default function App() {
    return (
        <div>
            <Slider vertical/>
        </div>
    );
}
```
![](/imgs/vertical.png)

### showStops && step=10
```tsx
import { Slider } from "rc-simple-slider";

export default function App() {
    return (
        <div>
            <Slider showStops step={10}/>
        </div>
    );
}
```
![](/imgs/showStope-step%3D10.png)


### marks
```tsx
import { Slider } from "rc-simple-slider";
const marks = {
    0: 0,
    8: 8,
    50: 50,
    70: {
        style: {
            color: 'deeppink',
            fontSize: 18,
        },
        label: 70,
    },
};

export default function App() {
    return (
        <div>
            <Slider marks={marks}/>
        </div>
    );
}
```
![](/imgs/marks.png)

### children
```tsx
import { Slider } from "rc-simple-slider";
import Pikachu from './Pikachu.png';

export default function App() {
    return (
        <div>
            <Slider>
                {() => {
                    return (
                        <img
                            style={{ width: '100%', height: '100%', position: 'absolute' }}
                            src={Pikachu}
                        />
                    );
                }}
            </Slider>
        </div>
    );
}
```
![](/imgs/children.png)

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