TNTWeb – The full name of Tencent News Zhongtai front-end team, partners in the group have practiced and accumulated experience in Web front-end, NodeJS development, UI design, mobile APP and other large front-end fields.

At present, the team mainly supports the front-end development of Tencent news business. Besides business development, some front-end infrastructure has been accumulated to enable business efficiency improvement and product innovation.

The team advocates open source construction, has a variety of technical masters, the team Github address: github.com/tnfe

Sophia

For those of you who are moving bricks together, after waiting for the state to allocate targets without success, I began to concentrate on technology and money. React Range Slider Libraries React Range Slider libraries React Range Slider libraries

A, the rc – the slider

First up was RC-Slider, with 967K weekly downloads.

  • Installation:npm install rc-slider
  • Use:
import Slider, { Range } from 'rc-slider';
import 'rc-slider/assets/index.css';

export default () => (
  <>
    <Slider />
    <Range />
  </>
);
Copy the code
  • Official documentation: Slider-react-Component

Second, the @ available – UI/slider

GitHub star library – GitHub Star library – GitHub Star library – GitHub Star Library – GitHub Star Library

  • Installation:
$yarn add @chakra-ui/react @emotion/react@^11 @styled @^11 framer-motion@^4 # or $NPM I @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4Copy the code
  • Use:
import * as React from "react" // 1. Import {ChakraProvider} from "@chakra-ui/react" function App({Component}) {// 2. Use return (<ChakraProvider> <Component /> </ChakraProvider>)} in the App.Copy the code

  • Official documentation: Chakra-ui

  • sandbox demo: TypeScript Starter

Three, the react – range – step – input

  • Installation:npm install --save react-range-step-input
  • Use:
import {RangeStepInput} from 'react-range-step-input'; // Add to render method: <RangeStepInput />Copy the code
  • The demo sample

Fourth, the react – range

  • Installation:yarn add react-range
  • Use:
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 ({) 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' }} /> )} /> ); }}Copy the code
  • sandbox demo

Five, the @ progress/kendo – react – inputs

This is a professional UI component and data visualization library. Content and complete, no more words, directly on the link:

  • openbase

  • The art of React UI

Six, the react – input – range

  • Installation:npm install react-input-range
  • Use:
    • The introduction ofreact-input-rangeIn theInputRangeComponents.
    • Maximum/minimum received value:
    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') );Copy the code
    • Effect of the sample

Seven, the react – rangeslider

  • Installation:$ npm install react-rangeslider --save
  • Use:
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}
      />
    )
  }
}
Copy the code
  • The document

Eight, the react – nouislider

  • Installation:npm install react-nouislider --save
  • Use:
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')
);

Copy the code

Nine, @ atlaskit/field – range

  • Installation:yarn add @atlaskit/field-range
  • Use:
import FieldRange from '@atlaskit/field-range';

<FieldRange/>

Copy the code
  • The document

Ten, the react – semantic – UI – range

  • Installation:npm i react-semantic-ui-range
  • Use:
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;
Copy the code
  • Making a link
  • Effect of the demo