如何在 Laravel 项目中为 React 添加多个入口点

Question

是否可以在 React rc-slider Range 组件上设置单值？目前要做到这一点，我需要将第二个手柄拖到第一个手柄前面，或者第一个手柄拖到第二个手柄之后，这种行为允许用户将手柄拖到导轨后面，如果我们处于边缘值

我想像第三张图片一样设置它，例如它会显示。 39 到 39。这是我的代码

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) {
                setMinVal(value[0]);
                setMaxVal(value[1]);
            } else {
                setMinVal(value);
                setMaxVal(value);
            }
            onChange(value);
        },
        min: min,
        max: max,
        defaultValue: stereo ? [0, 100] : 0
    };
    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} />}
        </>
    );
};

我知道单个范围滑块适用于单个值，尽管客户已请求此功能。谢谢

Answer 1

首先，我很抱歉混淆了标题和问题，标题应该不同，我发现了我认为是 rc-slider 的错误，但是我将第二条轨道翻译为包含在曲目中，我已经在 post styling rc-slider track to contain handles within itself 中详细解释了所有内容，因此我将关闭此曲目。谢谢

如何在 Laravel 项目中为 React 添加多个入口点

How to add multiple entry points for React in Laravel project

javascript

reactjs

rc-slider