https://github.com/yanyuanfe/react-ruler

:straight_ruler:Ruler component for react
https://github.com/yanyuanfe/react-ruler

component react ruler ruler-component

Last synced: 11 months ago
JSON representation

:straight_ruler:Ruler component for react

• Host: GitHub
• URL: https://github.com/yanyuanfe/react-ruler
• Owner: YanYuanFE
• License: mit
• Created: 2018-01-11T07:58:15.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2024-02-22T14:14:18.000Z (over 2 years ago)
• Last Synced: 2025-08-18T14:38:20.096Z (11 months ago)
• Topics: component, react, ruler, ruler-component
• Language: JavaScript
• Homepage:
• Size: 5.43 MB
• Stars: 18
• Watchers: 2
• Forks: 5
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# rc-ruler

> Ruler component for React

# Why

![设计稿](./src/assets/ui.png "设计稿")

*为了实现上面的设计，折腾了一个这样的轮子。*

### 效果如下

![效果](./src/assets/result.png "效果")

* 仅支持PC端

* 支持拖拽、点击来选择相应的值

* 可以和Ant-Design的Form结合

* 依赖rxjs处理事件(按需加载)

## Install

```bash

npm install rc-ruler --save

```

## Usage

``` js

import Ruler from 'rc-ruler';

import 'rc-ruler/dist/index.css';

```

``` js

handleDragChange = (value) => {

   console.log(value);

}

```

## Proptypes

```js

   propTypes: {

      // current value

      value: PropTypes.number,

      // start value

      start: PropTypes.number,

      // end value

      end: PropTypes.number,

      // step of drag

      step: PropTypes.number,

      // handle drag function

      onDrag: PropTypes.func,

      // class of component

      className: PropTypes.string,

   }

```

## License

[MIT][mit-license]

[mit-license]: ./LICENSE