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在拖动结束时触发。
注意事项
- 受控 vs 非受控：根据需求选择受控（
value+onChange）或非受控（defaultValue）模式。 - 样式兼容性：部分库（如
rc-slider）需要单独引入 CSS 文件。 - 移动端支持：确保测试触摸交互，某些库可能需要额外配置。
