当前位置：首页 > React

react实现slider组件

2026-01-27 02:54:27React

实现基础Slider结构

使用React的useState管理滑块值状态，通过input元素实现滑动交互：

import React, { useState } from 'react';

function Slider({ min = 0, max = 100, defaultValue = 50 }) {
  const [value, setValue] = useState(defaultValue);

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

  return (
    <div className="slider-container">
      <input
        type="range"
        min={min}
        max={max}
        value={value}
        onChange={handleChange}
        className="slider"
      />
      <span className="slider-value">{value}</span>
    </div>
  );
}

添加自定义样式

通过CSS增强滑块视觉效果，以下为示例样式：

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #ddd;
  outline: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider-value {
  display: inline-block;
  margin-left: 10px;
  min-width: 30px;
  text-align: center;
}

实现双向滑块

创建支持范围选择的双滑块组件：

function RangeSlider({ min, max }) {
  const [minVal, setMinVal] = useState(min);
  const [maxVal, setMaxVal] = useState(max);

  return (
    <div>
      <input
        type="range"
        min={min}
        max={max}
        value={minVal}
        onChange={(e) => setMinVal(Math.min(parseInt(e.target.value), maxVal - 1))}
      />
      <input
        type="range"
        min={min}
        max={max}
        value={maxVal}
        onChange={(e) => setMaxVal(Math.max(parseInt(e.target.value), minVal + 1))}
      />
      <div>
        <span>Min: {minVal}</span>
        <span>Max: {maxVal}</span>
      </div>
    </div>
  );
}

添加垂直滑块选项

通过CSS转换实现垂直方向滑块：

.vertical-slider {
  -webkit-appearance: slider-vertical;
  width: 8px;
  height: 200px;
}

实现自定义标记点

在Slider上显示预定义标记位置：

function MarkedSlider({ marks }) {
  return (
    <div className="slider-marks-container">
      <input type="range" className="slider" />
      <div className="slider-marks">
        {marks.map((mark) => (
          <span key={mark} style={{ left: `${mark}%` }} />
        ))}
      </div>
    </div>
  );
}

添加工具提示显示

滑块悬停时显示当前值的工具提示：

function TooltipSlider() {
  const [showTooltip, setShowTooltip] = useState(false);

  return (
    <div className="slider-tooltip-container">
      <input 
        type="range"
        onMouseEnter={() => setShowTooltip(true)}
        onMouseLeave={() => setShowTooltip(false)}
      />
      {showTooltip && (
        <div className="slider-tooltip">
          {value}
        </div>
      )}
    </div>
  );
}

性能优化技巧

使用useCallback避免不必要的渲染：

const handleChange = useCallback((e) => {
  setValue(parseInt(e.target.value));
}, []);

组件属性扩展

添加更多可配置参数提升灵活性：

react实现slider组件

Slider.propTypes = {
  min: PropTypes.number,
  max: PropTypes.number,
  step: PropTypes.number,
  defaultValue: PropTypes.number,
  onChange: PropTypes.func,
  disabled: PropTypes.bool,
  className: PropTypes.string
};