在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:whoisandy/react-rangeslider开源软件地址:https://github.com/whoisandy/react-rangeslider开源编程语言:JavaScript 76.7%开源软件介绍:A fast & lightweight react component as a drop in replacement for HTML5 input range slider element. InstallationUsing $ npm install react-rangeslider --save Using $ yarn add react-rangeslider Getting StartedReact-Rangeslider is bundled with a slider component & default styles which can be overridden depending on your design requirements. With a module bundler like webpack that supports either CommonJS or ES2015 modules, use as you would anything else: // 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') The UMD build is also available on unpkg: <script src="https://unpkg.com/react-rangeslider/umd/rangeslider.min.js"></script> You can find the library on <link rel="stylesheet" href="https://unpkg.com/react-rangeslider/umd/rangeslider.min.css" /> Check out docs & examples. Basic Exampleimport 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}
/>
)
}
} APIRangeslider is bundled as a single component, that accepts data and callbacks only as Componentimport 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}
/> Props
DevelopmentTo work on the project locally, you need to pull its dependencies and run $ npm install
$ npm start IssuesFeel free to contribute. Submit a Pull Request or open an issue for further discussion. LicenseMIT |
2022-08-15
2022-08-17
2022-09-23
2022-08-18
2022-09-04
请发表评论