react-slider介绍

react-slider 是一个 轻量级的 React 滑块（Slider）组件库，用于实现数值选择、范围选择、音量调节、价格区间选择等场景。它提供了 单滑块、双滑块、多滑块 的支持，并且完全受控/非受控可选，样式可自定义。

它是纯 React 实现，无额外依赖，非常适合做自定义 UI。

1. 核心特点

1. 支持单滑块、双滑块和多滑块

   • 常用于单值选择或范围选择

2. 受控/非受控模式

   • 可以通过 value 控制，也可以使用内部状态

3. 键盘可访问性（Accessibility）

   • 支持键盘操作和 ARIA 标签

4. 高度可自定义样式

   • 提供 className 和 render 函数，可实现自定义轨道、手柄样式

5. 轻量

   • 无额外依赖，适合现代 React 项目

2. 安装

npm install react-slider

3. 基本用法

1) 单滑块示例

import React, { useState } from "react";
import ReactSlider from "react-slider";
import "./slider.css"; // 自定义样式

function SingleSlider() {
  const [value, setValue] = useState(50);

  return (
    <div style={{ width: 300 }}>
      <ReactSlider
        value={value}
        onChange={setValue}
        className="slider"
        thumbClassName="thumb"
        trackClassName="track"
        min={0}
        max={100}
      />
      <p>当前值：{value}</p>
    </div>
  );
}

export default SingleSlider;

说明：

• value：当前值
• onChange：滑动时触发
• thumbClassName：滑块（Thumb）的样式
• trackClassName：轨道（Track）的样式

2) 双滑块（范围选择）

function RangeSlider() {
  const [range, setRange] = useState([20, 80]);

  return (
    <div style={{ width: 300 }}>
      <ReactSlider
        value={range}
        onChange={setRange}
        className="slider"
        thumbClassName="thumb"
        trackClassName="track"
        min={0}
        max={100}
        pearling
        minDistance={10} // 两个滑块之间最小距离
      />
      <p>选择区间：{range[0]} - {range[1]}</p>
    </div>
  );
}

注意：

• 传数组给 value 即可支持多个滑块
• pearling 允许滑块相互推动
• minDistance 限制最小间距

4. 常用 Props

属性	类型	说明
value	number / number[]	当前值或范围值
defaultValue	number / number[]	默认值（非受控）
onChange(value)	function	拖动时回调
onAfterChange(value)	function	拖动完成后回调
min / max	number	最小值 / 最大值
step	number	步长（默认 1）
minDistance	number	多滑块最小间距
pearling	boolean	是否允许滑块相互推动
orientation	`'horizontal' \	'vertical'`	方向
invert	boolean	反向滑动
className	string	组件根元素 class
thumbClassName	string	滑块 class
trackClassName	string / string[]	轨道 class，可针对多段轨道设置数组
renderThumb	function	自定义滑块渲染
renderTrack	function	自定义轨道渲染

5. 样式自定义

react-slider 本身没有强制样式，需要你自定义 CSS：

.slider {
  height: 6px;
  background: #ddd;
}

.track {
  background: #0d6efd;
}

.thumb {
  height: 20px;
  width: 20px;
  background: #fff;
  border: 2px solid #0d6efd;
  border-radius: 50%;
  cursor: grab;
}

6. 应用场景

1. 表单数值选择：音量、亮度、评分
2. 价格区间选择：电商筛选
3. 时间范围选择：播放进度、时间轴
4. 多维度调节：游戏或数据可视化控制器

7. 总结

• react-slider 是轻量、无依赖的滑块组件
• 优点：受控/非受控皆可、自定义样式灵活、多滑块支持
• 缺点：不提供现成美观样式，需要手动写 CSS