react 如何引用slider

使用 React 实现 Slider 组件

在 React 中实现 Slider 功能可以通过原生 HTML 的 <input type="range"> 或第三方库（如 react-slider、rc-slider 等）完成。以下是两种常见方法：

原生 HTML Slider

通过 <input type="range"> 结合 React 的状态管理实现基础 Slider：

import React, { useState } from 'react';

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

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <div>
      <input
        type="range"
        min="0"
        max="100"
        value={value}
        onChange={handleChange}
      />
      <p>当前值: {value}</p>
    </div>
  );
}

export default NativeSlider;

使用第三方库 react-slider

安装 react-slider 库：

npm install react-slider

示例代码：

import React, { useState } from 'react';
import Slider from 'react-slider';

function CustomSlider() {
  const [value, setValue] = useState([25, 75]); // 支持范围选择

  return (
    <div>
      <Slider
        value={value}
        onChange={setValue}
        min={0}
        max={100}
        pearling // 启用双滑块
      />
      <p>当前范围: {value.join(' - ')}</p>
    </div>
  );
}

export default CustomSlider;

使用 rc-slider 库

安装 rc-slider：

npm install rc-slider

示例代码：

import React, { useState } from 'react';
import { Slider } from 'rc-slider';
import 'rc-slider/assets/index.css'; // 引入默认样式

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

  return (
    <div style={{ width: '300px', margin: '20px' }}>
      <Slider
        value={value}
        onChange={setValue}
        min={0}
        max={100}
        trackStyle={{ backgroundColor: 'blue' }}
        handleStyle={{ borderColor: 'blue' }}
      />
      <p>当前值: {value}</p>
    </div>
  );
}

export default RcSliderExample;

关键配置选项

• 最小值/最大值：通过 min 和 max 控制 Slider 范围。
• 默认值：通过 defaultValue 或 value（受控模式）设置初始值。
• 样式：多数库支持自定义轨道（track）和滑块（handle）样式。
• 事件：onChange 监听值变化，onAfterChange 在拖动结束时触发。

注意事项

1. 受控 vs 非受控：根据需求选择受控（value + onChange）或非受控（defaultValue）模式。
2. 样式兼容性：部分库（如 rc-slider）需要单独引入 CSS 文件。
3. 移动端支持：确保测试触摸交互，某些库可能需要额外配置。