react实现slider
使用 React 实现 Slider
基础实现
使用 useState 和事件处理实现基础滑块功能。创建一个受控组件，通过 onChange 事件更新滑块值。
import { useState } from 'react';
function Slider() {
const [value, setValue] = useState(50);
return (
<div>
<input
type="range"
min="0"
max="100"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
<p>当前值: {value}</p>
</div>
);
}自定义样式
通过 CSS 自定义滑块外观。使用 style 属性或外部 CSS 文件修改滑块的轨道和拇指样式。
/* 自定义滑块样式 */
input[type="range"] {
width: 100%;
height: 8px;
background: #ddd;
border-radius: 4px;
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
background: #4CAF50;
border-radius: 50%;
cursor: pointer;
}多滑块实现
实现范围选择滑块（双滑块）。使用两个 input 元素和状态管理来分别控制最小和最大值。
import { useState } from 'react';
function RangeSlider() {
const [min, setMin] = useState(20);
const [max, setMax] = useState(80);
return (
<div>
<input
type="range"
min="0"
max="100"
value={min}
onChange={(e) => setMin(Math.min(Number(e.target.value), max))}
/>
<input
type="range"
min="0"
max="100"
value={max}
onChange={(e) => setMax(Math.max(Number(e.target.value), min))}
/>
<p>范围: {min} - {max}</p>
</div>
);
}使用第三方库
对于更复杂的功能（如动画、垂直滑块等），可以使用成熟的 React Slider 库，如 react-slider。
安装库：
npm install react-slider示例代码：
import ReactSlider from 'react-slider';
function CustomSlider() {
const [value, setValue] = useState(50);
return (
<ReactSlider
className="custom-slider"
thumbClassName="custom-thumb"
trackClassName="custom-track"
value={value}
onChange={setValue}
/>
);
}性能优化
对于频繁更新的滑块，使用 useMemo 或 useCallback 优化事件处理函数。避免不必要的重新渲染。
import { useState, useCallback } from 'react';
function OptimizedSlider() {
const [value, setValue] = useState(50);
const handleChange = useCallback((e) => {
setValue(e.target.value);
}, []);
return (
<input
type="range"
value={value}
onChange={handleChange}
/>
);
}无障碍支持
确保滑块对屏幕阅读器友好，添加适当的 ARIA 属性。
<input
type="range"
aria-label="音量控制"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow={value}
/>垂直滑块实现
通过 CSS 旋转或特定库实现垂直方向的滑块。
.vertical-slider {
transform: rotate(270deg);
width: 100px;
height: 20px;
}以上方法提供了从基础到高级的 React Slider 实现方案，可根据具体需求选择适合的方式。
