带 2 个手柄的引导范围滑块

一个带有两个手柄的引导范围滑块（又称为"双滑块"）是一种表单输入控件，允许用户选择一个数字范围（最小值和最大值）。在滑块范围内拖动手柄，用户可以看到他们所选择的数字范围的实时更新。此控件常用于搜索、筛选和商品价格过滤器中。

典型用法

双滑块通常由以下组成：

• 范围区间：显示被选中的数字范围。
• 左侧手柄：拖动以选择数字范围的最小值。
• 右侧手柄：拖动以选择数字范围的最大值。
• 底部进度条：显示数字范围的整体范围，并显示所选范围的比例。

以下是一个示例代码块，展示如何使用react-rangeslider实现一个双滑块。

import React, { Component } from 'react';
import Slider from 'react-rangeslider';
import 'react-rangeslider/lib/index.css';

class DoubleSlider extends Component {
  constructor(props) {
    super(props)
    this.state = {
      minValue: 0,
      maxValue: 100
    }
  }

  handleChange = (value) => {
    this.setState({
      minValue: value.min,
      maxValue: value.max,
    })
  }

  render() {
    const { minValue, maxValue } = this.state
    return (
      <div className='slider'>
        <span className='slider__range'>{minValue} - {maxValue}</span>
        <Slider
          min={0}
          max={100}
          value={{
            min: minValue,
            max: maxValue
          }}
          onChange={this.handleChange}
          pearling
          allowOverlap
        />
        <div className='slider__progress-bar'>
          <div className='slider__progress-bar--filled' style={{
            width: `${(maxValue - minValue) / 100 * 100}%`,
            left: `${minValue / 100 * 100}%`,
          }}/>
        </div>
      </div>
    )
  }
}

export default DoubleSlider;

自定义样式

可以使用CSS自定义样式来更改双滑块控件的外观。

以下是一个带有自定义样式的示例代码块：

import React, { Component } from 'react';
import Slider from 'react-rangeslider';
import 'react-rangeslider/lib/index.css';
import './DoubleSlider.css';

class DoubleSlider extends Component {
  constructor(props) {
    super(props)
    this.state = {
      minValue: 0,
      maxValue: 100
    }
  }

  handleChange = (value) => {
    this.setState({
      minValue: value.min,
      maxValue: value.max,
    })
  }

  render() {
    const { minValue, maxValue } = this.state
    return (
      <div className='slider'>
        <span className='slider__range'>{minValue} - {maxValue}</span>
        <Slider
          min={0}
          max={100}
          value={{
            min: minValue,
            max: maxValue
          }}
          onChange={this.handleChange}
          pearling
          allowOverlap
          className='slider__main'
        />
        <div className='slider__progress-bar'>
          <div className='slider__progress-bar--filled' style={{
            width: `${(maxValue - minValue) / 100 * 100}%`,
            left: `${minValue / 100 * 100}%`,
          }}/>
        </div>
      </div>
    )
  }
}

export default DoubleSlider;

其中的CSS文件DoubleSlider.css包含了一些自定义样式的代码，如下所示：

.slider {
  position: relative;
  min-height: 80px;
  padding: 0 20px;
}

.slider__range {
  display: block;
  margin-bottom: 5px;
}

.slider__main {
  margin-bottom: 10px;
}

.slider__progress-bar {
  position: absolute;
  bottom: 10px;
  left: 20px;
  right: 20px;
  height: 5px;
  background-color: #e3e3e3;
}

.slider__progress-bar--filled {
  height: 5px;
  background-color: #22c28b;
  position: absolute;
  top: 0;
  bottom: 0;
}

总结

一个双滑块引导范围滑块是一个非常有用的表单控件，可以让用户轻松选择数字范围。React RangeSlider 是一个非常流行的 React 组件，可以轻松使用来构建双滑块控件。此外，使用CSS可以轻松自定义控件的外观。