如何在React rc-slider Range组件上设置两端相等的单值区间

rc-slider 的 Range 组件本身原生支持两端相等的单值区间，你只需要调整组件属性和回调逻辑即可实现需求，同时解决滑块拖出边界的问题：

核心修改点 #

• 给 Range 组件添加 minDifference={0} 属性：该属性定义两个滑块的最小差值，默认值为1，设置为0后允许两个滑块值完全相等，就能实现 39~39 的单值区间效果
• 给 Range 组件添加 allowCross={false} 属性：禁止两个滑块交叉重叠，不需要拖拽滑块越过对方就能实现重合效果，避免操作逻辑反直觉
• 在 onChange 回调中加入边界值校验，避免拖动到边界时滑块超出滑轨范围

修改后的完整代码 #

import React, { useState } from "react";
import Slider, { Range } from "rc-slider";
import "rc-slider/assets/index.css";

export const RangeSlider = ({
    min,
    max,
    error,
    displayUnit,
    stereo,
    onChange
}) => {
    const [minVal, setMinVal] = useState(min);
    const [maxVal, setMaxVal] = useState(max);
    const props = {
        onChange: value => {
            if (stereo) {
                // 边界值修正，避免超出滑轨范围
                const clampedMin = Math.max(min, Math.min(value[0], max));
                const clampedMax = Math.max(min, Math.min(value[1], max));
                setMinVal(clampedMin);
                setMaxVal(clampedMax);
                onChange([clampedMin, clampedMax]);
            } else {
                const clampedVal = Math.max(min, Math.min(value, max));
                setMinVal(clampedVal);
                setMaxVal(clampedVal);
                onChange(clampedVal);
            }
        },
        min: min,
        max: max,
        defaultValue: stereo ? [min, max] : min,
        // 新增Range专属属性
        ...(stereo && {
            minDifference: 0,
            allowCross: false
        })
    };
    return (
        <>
            {error && (
                <span className="position-outside">
                    <i className="fas fa-exclamation-circle fa text-danger mt-2"></i>
                </span>
            )}
            <div className="text-primary h6 mb-3">
                <strong>
                    {stereo &&
                        `Od ${minVal}${
                            displayUnit ? " " + displayUnit : ""
                        } do ${maxVal}${displayUnit ? " " + displayUnit : ""}`}
                    {!stereo &&
                        `${minVal}${displayUnit ? " " + displayUnit : ""}`}
                </strong>
            </div>
            {stereo ? <Range {...props} /> : <Slider {...props} />}
        </>
    );
};

可选优化 #

如果需要两个滑块重合后拖动任意一个都同步移动，可以在 onChange 中增加判断：当两个值已经相等时，后续拖动操作始终保持两个值同步更新即可。

内容的提问来源于stack exchange，提问作者seven