@acomito/react-input-range 中文文档教程

Question

react-input-range

InputRange 是一个 React 组件，允许用户输入特定范围内的数值。 它可以接受单个值或一系列值（最小值/最大值）。 默认情况下，应用基本样式，但可以根据您的设计要求进行覆盖。

Demo

此处提供了 CodePen 演示。

Installation

1. Install react-input-range using npm (or yarn). npm install react-input-range
2. Import react-input-range to use InputRange component.
3. Optionally, import react-input-range/lib/css/index.css if you want to apply the default styling.

Usage

接受最小/最大值：

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')
);

接受单个值：

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = { value: 10 };
  }

  render() {
    return (
      <InputRange
        maxValue={20}
        minValue={0}
        value={this.state.value}
        onChange={value => this.setState({ value })} />
    );
  }
}

格式化标签：

<InputRange
  formatLabel={value => `${value}cm`}
  value={this.state.value}
  onChange={value => this.setState({ value })} />

指定增量/减量

<InputRange
  step={2}
  value={this.state.value}
  onChange={value => this.setState({ value })} />

API

InputRange#props

allowSameValues: boolean

设置为 true 以允许 minValue 和 maxValue 是一样的。

ariaLabelledby: string

为您的组件设置 aria-labelledby 属性。

ariaControls: string

为您的组件设置 aria-controls 属性。

classNames: InputRangeClassNames

覆盖应用于您的组件及其子组件的默认 CSS 类。

disabled: boolean

如果此属性设置为 true，则您的组件将被禁用。 这意味着您将无法与之交互。

draggableTrack: boolean

如果此属性设置为 true，则可以拖动整个轨道。

formatLabel: (value: number, type: string): string

默认情况下，值标签显示为纯数字。 如果你想改变显示，你可以通过传入一个函数来实现。 该函数可以返回不同的东西，即：追加一个单位，降低数字的精度。

maxValue: number

为您的组件设置最大值。 您不能将滑块拖动到该值之外。

minValue: number

为您的组件设置一个最小值。 您不能将滑块拖动到该值以下。

name: string

为您的表单组件设置一个名称。

onChange: (value: number | Range): void

每当您的用户与您的组件交互（即：拖动滑块）时，都会调用此函数。 在函数内部，您应该将新值分配给您的组件。

onChangeStart: (value: number | Range): void

每当您的用户开始与您的组件交互时（即：onMouseDown 或 onTouchStart），都会调用此函数。

onChangeComplete: (value: number | Range): void

每个鼠标/触摸事件都可以触发多次更新，因此导致多次触发 onChange 回调。 另一方面，onChangeComplete 回调只会在用户停止拖动时被调用。

step: number

组件的默认增量/减量为 1。您可以通过为此属性设置不同的数字来更改它。

value: number | Range

设置组件的当前值。 如果只提供一个数字，则只会呈现一个滑块。 如果提供范围对象（最小值/最大值），将呈现两个滑块

Types

InputRangeClassNames

• activeTrack: string
• disabledInputRange: string
• inputRange: string
• labelContainer: string
• maxLabel: string
• minLabel: string
• slider: string
• sliderContainer: string
• track: string
• valueLabel: string

Range

• max: number
• min: number

Development

如果你想在本地处理这个项目，你需要获取它的所有依赖项，为此 我们推荐使用 yarn。 您可以在此处找到设置 yarn 的说明。

yarn install

之后，你应该可以运行预览

yarn dev

来测试

yarn test

欢迎贡献。 :)