快速和轻量级反应组件,作为HTML5输入范围滑动元素的倒置.
安装
使用 npm (使用时 --save 把它纳入你的包裹。 json)
$ npm install react-rangeslider --save
使用 yarn (此命令还会在您的软件包中添加反应范围滑动器。 json 依赖性)
$ yarn add react-rangeslider
开始
React-Range滑行器被捆绑有滑行器组件和默认样式,这些样式可以根据您的设计要求被覆盖 .
用一个模块捆绑器,如网络包,支持通用JS或ES2015模块,随你如何使用:
// Using an ES6 transpiler like Babel
import Slider from 'react-rangeslider'
// To include the default styles
import 'react-rangeslider/lib/index.css'
// Not using an ES6 transpiler
var Slider = require('react-rangeslider')
UMD的建筑还可以在下列网址上查阅: (单位:公斤)数字 :
<script src="https://unpkg.com/react-rangeslider/umd/rangeslider.min.js"></script>
您可以在 window.ReactRangeslider。可以选择通过添加样式表在默认样式中降下.
<link rel="stylesheet" href="https://unpkg.com/react-rangeslider/umd/rangeslider.min.css" />
检查出来 文件实例( e)。 。 。 .
基本示例
import React, { Component } from 'react'
import Slider from 'react-rangeslider'
class VolumeSlider extends Component {
constructor(props, context) {
super(props, context)
this.state = {
volume: 0
}
}
handleOnChange = (value) => {
this.setState({
volume: value
})
}
render() {
let { volume } = this.state
return (
<Slider
value={volume}
orientation="vertical"
onChange={this.handleOnChange}
/>
)
}
}
API 密码
范围滑动器被捆绑为一个单一的组件,它只接受数据和回调 props。 。 。 .
构成部分
import Slider from 'react-rangeslider'
// inside render
<Slider
min={Number}
max={Number}
step={Number}
value={Number}
orientation={String}
reverse={Boolean}
tooltip={Boolean}
labels={Object}
handleLabel={String}
format={Function}
onChangeStart={Function}
onChange={Function}
onChangeComplete={Function}
/>
道具
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
min | 编号 | 0 个 | 滑动器可持有的最小值 |
max | 编号 | 100个 | 滑动器可持有的最大值 |
step | 编号 | 1个 | 须加薪/降薪的分步骤 |
value | 编号 | 滑动器的当前值 | |
orientation | 字符串 | 水平 | 滑动器的方向 |
tooltip | 布尔 | 真实 | 显示或隐藏工具提示 |
reverse | 布尔 | 虚假 | 垂直滑动器的倒向( 从下到下) |
labels | 对象 | {} | 含有密钥值对的对象. { 0: 'Low', 50: 'Medium', 100: 'High'} |
handleLabel | 字符串 | '' | 在滑动手柄内显示的字符串标签 |
format | 函数 | 在标签或工具提示中格式化和显示值的函数 | |
onChangeStart | 函数 | 当用户开始拖动滑动手柄时,函数会被调用 | |
onChange | 函数 | 当滑动手柄被拖动或点击时,函数会被调用 | |
onChangeComplete | 函数 | 当用户停止拖动滑动手柄时,函数会被调用. |
发展
要在当地工作,你需要拉它的依赖和运行 npm start。 。 。 .
$ npm install
$ npm start
问题
随意贡献. 提交拉动请求或提出一个问题供进一步讨论.
许可证
麻省理工学院