10个好用的React Range Slider库

3,397 阅读2分钟

TNTWeb - 全称腾讯新闻中台前端团队,组内小伙伴在Web前端、NodeJS开发、UI设计、移动APP等大前端领域都有所实践和积累。

目前团队主要支持腾讯新闻各业务的前端开发,业务开发之余也积累沉淀了一些前端基础设施,赋能业务提效和产品创新。

团队倡导开源共建,拥有各种技术大牛,团队Github地址:github.com/tnfe

本文作者Sophia

image.png 各位一起搬砖的小伙伴们,在坐等国家分配对象无果后,我开始潜心技术,专心搞钱了。这不, 整理出了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 />
  </>
);

image.png

二、 @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>
  )
}

image.png

三、 react-range-step-input

  • 安装:npm install --save react-range-step-input
  • 使用:
import {RangeStepInput} from 'react-range-step-input';

// 在render方法中添加:

<RangeStepInput />

image.png

四、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'
            }}
          />
        )}
      />
    );
  }
}

image.png

五、 @progress/kendo-react-inputs

这是一款专业的UI组件和数据可视化库。内容多而全,话不多说,直接上链接:

image.png

六、react-input-range

image.png

  • 安装: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

image.png

  • 安装:$ 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')
);

wecom-temp-556ff1554406076dde96021c507ae18f.png

九、 @atlaskit/field-range

  • 安装: yarn add @atlaskit/field-range
  • 使用:
import FieldRange from '@atlaskit/field-range';

<FieldRange/>

image.png

十、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;

image.png