10个好用的React Range Slider库
10个好用的React Range Slider库
TNTWeb - 全称腾讯新闻中台前端团队,组内小伙伴在Web前端、NodeJS开发、UI设计、移动APP等大前端领域都有所实践和积累。
目前团队主要支持腾讯新闻各业务的前端开发,业务开发之余也积累沉淀了一些前端基础设施,赋能业务提效和产品创新。
团队倡导开源共建,拥有各种技术大牛,团队Github地址:github.com/tnfe
本文作者Sophia
各位一起搬砖的小伙伴们,在坐等国家分配对象无果后,我开始潜心技术,专心搞钱了。这不, 整理出了10个React Range Slider的库,分享给大家,打工人一起进步啊~
一、rc-slider
首先闪亮登场的是rc-slider, 周下载量达967K。
- 安装:
npm install rc-slider
- 使用:
代码解读
复制代码
import Slider, { Range } from 'rc-slider';
import 'rc-slider/assets/index.css';
export default () => (
<>
<Slider />
<Range />
</>
);
二、 @chakra-ui/slider
这是一款GitHub star数比较多的库,旨在少量的编码,高效的速度。
- 安装:
代码解读
复制代码
$ yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
# 或者
$ npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
- 使用:
代码解读
复制代码
import * as React from "react"
// 1. 导入 `ChakraProvider` 组件
import { ChakraProvider } from "@chakra-ui/react"
function App({ Component }) {
// 2. 在跟App中使用
return (
<ChakraProvider>
<Component />
</ChakraProvider>
)
}
-
官方文档:chakra-ui
-
sandbox demo: TypeScript Starter
三、 react-range-step-input
- 安装:
npm install --save react-range-step-input
- 使用:
代码解读
复制代码
import {RangeStepInput} from 'react-range-step-input';
// 在render方法中添加:
<RangeStepInput />
四、react-range
- 安装:
yarn add react-range
- 使用:
代码解读
复制代码
import * as React from 'react';
import { Range } from 'react-range';
class SuperSimple extends React.Component {
state = { values: [50] };
render() {
return (
<Range
step={0.1}
min={0}
max={100}
values={this.state.values}
onChange={(values) => this.setState({ values })}
renderTrack={({ props, children }) => (
<div
{...props}
style={{
...props.style,
height: '6px',
width: '100%',
backgroundColor: '#ccc'
}}
>
{children}
</div>
)}
renderThumb={({ props }) => (
<div
{...props}
style={{
...props.style,
height: '42px',
width: '42px',
backgroundColor: '#999'
}}
/>
)}
/>
);
}
}
五、 @progress/kendo-react-inputs
这是一款专业的UI组件和数据可视化库。内容多而全,话不多说,直接上链接:
六、react-input-range
- 安装:
npm install react-input-range
- 使用:
- 引入
react-input-range
中的InputRange
组件。 - 接收最大/最小值:
代码解读复制代码import React from 'react'; import ReactDOM from 'react-dom'; import InputRange from 'react-input-range'; class App extends React.Component { constructor(props) { super(props); this.state = { value: { min: 2, max: 10 }, }; } render() { return ( <InputRange maxValue={20} minValue={0} value={this.state.value} onChange={value => this.setState({ value })} /> ); } } ReactDOM.render( <App />, document.getElementById('app') );
- 引入
七、react-rangeslider
- 安装:
$ npm install react-rangeslider --save
- 使用:
代码解读
复制代码
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}
/>
)
}
}
八、 react-nouislider
- 安装:
npm install react-nouislider --save
- 使用:
代码解读
复制代码
import React from 'react';
import ReactDOM from 'react-dom';
import Nouislider from 'react-nouislider';
ReactDOM.render(
<Nouislider
range={{min: 0, max: 200}}
start={[0, 100]}
tooltips
/>, document.querySelector('#container')
);
九、 @atlaskit/field-range
- 安装:
yarn add @atlaskit/field-range
- 使用:
代码解读
复制代码
import FieldRange from '@atlaskit/field-range';
<FieldRange/>
十、react-semantic-ui-range
- 安装:
npm i react-semantic-ui-range
- 使用:
代码解读
复制代码
import React, { useState } from "react";
import { Slider } from "react-semantic-ui-range";
import "semantic-ui-css/semantic.min.css";
import { Label, Grid, Input } from "semantic-ui-react";
const App = props => {
const [value, setValue] = useState(5);
const settings = {
start: 2,
min: 0,
max: 10,
step: 1,
onChange: value => {
setValue(value);
}
};
const handleValueChange = e => {
let value = parseInt(e.target.value);
if (!value) {
value = 0;
}
setValue(e.target.value);
};
return (
<Grid>
<Grid.Column width={16}>
<Slider value={value} color="red" settings={settings} />
</Grid.Column>
<Grid.Column width={16}>
<Input placeholder="Enter Value" onChange={handleValueChange} />
<Label color="red">{value}</Label>
</Grid.Column>
</Grid>
);
};
export default App;
漫思