实现自定义方向的 React 滑动条：从原生控件到完全自定义解决方案

在开发一个复杂的数据可视化界面时，我们遇到了一个看似简单但实际上颇具挑战性的问题：如何创建一个滑动条，使其填充方向与原生 HTML 滑动条相反？具体来说，我们需要一个滑动条，其填充部分从当前值延伸到最大值，而不是从最小值到当前值。这个需求源于我们的河流细节级别（sorder）控制功能，我们希望视觉上强调从当前选择到最高细节级别的范围。

初步尝试：修改原生 input[type="range"]

我们的第一个想法是尝试修改原生的 <input type="range"> 元素。我们尝试了以下方法：

使用 CSS 伪元素：

css 复制代码

input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to left, #3B82F6, #3B82F6 50%, #E2E8F0 50%, #E2E8F0);
}

动态设置背景：

html 复制代码

<input
  type="range"
  style={{
    background: `linear-gradient(to right, #3B82F6 ${((sorder - 1) / 8) * 100}%, #E2E8F0 ${((sorder - 1) / 8) * 100}%, #E2E8F0 100%)`
  }}
/>

然而，这些方法都无法完全实现我们的需求。原生滑动条的行为是深深嵌入到浏览器的默认实现中的，仅凭 CSS 是无法改变其核心行为的。

转向自定义解决方案

认识到原生控件的局限性后，我们决定创建一个完全自定义的滑动条组件。这个方案包括以下关键步骤：

创建一个自定义的 React 组件，使用 div 元素模拟滑动条的外观。
实现自定义的交互逻辑，包括鼠标事件处理。
确保新组件的可访问性和易用性不亚于原生控件。

最终解决方案：CustomSlider 组件

我们最终实现了一个名为 CustomSlider 的组件，它完全满足了我们的需求：

javascript 复制代码

import React, { useState, useCallback, useEffect } from 'react';

interface CustomSliderProps {
  min: number;
  max: number;
  value: number;
  onChange: (value: number) => void;
  className?: string;
}

const CustomSlider: React.FC<CustomSliderProps> = ({ min, max, value, onChange, className = '' }) => {
  const [isDragging, setIsDragging] = useState(false);

  const getPercent = useCallback((value: number) => ((value - min) / (max - min)) * 100, [min, max]);

  const handleMouseDown = useCallback(() => setIsDragging(true), []);
  const handleMouseUp = useCallback(() => setIsDragging(false), []);

  const handleMouseMove = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
    if (!isDragging) return;
    const rect = event.currentTarget.getBoundingClientRect();
    const percent = (event.clientX - rect.left) / rect.width;
    const newValue = Math.round(percent * (max - min) + min);
    onChange(Math.max(min, Math.min(max, newValue)));
  }, [isDragging, min, max, onChange]);

  useEffect(() => {
    const handleGlobalMouseUp = () => setIsDragging(false);
    document.addEventListener('mouseup', handleGlobalMouseUp);
    return () => document.removeEventListener('mouseup', handleGlobalMouseUp);
  }, []);

  return (
    <div 
      className={`relative w-full h-4 bg-gray-200 rounded-full cursor-pointer ${className}`}
      onMouseDown={handleMouseDown}
      onMouseUp={handleMouseUp}
      onMouseLeave={handleMouseUp}
      onMouseMove={handleMouseMove}
    >
      <div 
        className="absolute top-0 right-0 bottom-0 bg-blue-500 rounded-full"
        style={{ width: `${100 - getPercent(value)}%` }}
      />
      <div 
        className="absolute top-[-4px] h-6 w-6 bg-white border-2 border-blue-500 rounded-full"
        style={{ right: `calc(${100 - getPercent(value)}% - 12px)` }}
      />
    </div>
  );
};

export default CustomSlider;

使用方法

javascript 复制代码

<div>
  <label className="block mb-1">sorder</label>
  <CustomSlider
    min={1}
    max={9}
    value={sorder}
    onChange={(value) => setSorder(value)}
  />
  <div className="flex justify-between text-sm mt-1">
    {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(value => (
      <span key={value}>{value}</span>
    ))}
  </div>
</div>

这个解决方案不仅实现了我们所需的反向填充效果，还提供了更大的灵活性和自定义能力。

结论

原生 HTML 控件虽然方便，但在面对特殊需求时可能会受到限制。
在 Web 开发中，有时创建自定义组件是实现特定交互需求的最佳方式。
自定义组件虽然需要更多的代码和考虑，但能提供更大的控制力和灵活性。