Javascript 输入类型范围样式和显示值问题

目前，我正在开发React BMI计算器应用程序，我遇到了输入类型范围元素的问题。我以前遇到过一些问题，但我在这里或谷歌上找到了帮助。一切正常，直到我更改了min和max值，使应用程序更有意义

如果min设置为1，而max设置为100，则一切正常

如您所见，数字显示在滑块拇指上方的气泡中，滑块轨迹选定部分的白色背景效果也很好。我能够移动滑块拇指，白色背景工作，气泡总是在滑块拇指的正上方

当我尝试将这些最小值和最大值切换到更真实的值时，问题就出现了

例如：

• 高度-最小值：150，最大值：220
• 重量-最小值：50，最大值：250

在这种情况下，我的整个应用程序中断，这就是结果。我不明白为什么，巴德，白色背景效果停止正常工作，滑块拇指一直向左，如果我尝试移动它们，气泡将显示在滑块拇指上方

拜托，有人能帮我吗？我一整天都在为此奋斗。所有方法（如何设置输入类型范围的样式/如何更改输入类型范围的颜色/如何在其上方制作气泡，甚至如何制作白色背景选择效果）我都在这里或谷歌上找到过，因此代码中可能会有一些错误，因为我从未尝试设置这些输入的样式或使用这些输入

---

谢谢你的帮助。这里是codesandbox的链接：

我已经尝试通过修改代码来完成所需的工作

下面是代码，您需要修改Range.js文件，如下所示：

import React，{useffect}来自“React”；
功能范围（道具）{
useffect（（）=>{
常量范围=document.getElementById（“范围”）；
const rangeV=document.getElementById（“rangeV”）；
const range2=document.getElementById（“range2”）；
const rangeV2=document.getElementById（“rangeV2”）；
常量设置值=（）=>{
常数newValue=数字(
（（range.value-range.min）*100）/（range.max-range.min）
);
常数newPosition=10—newValue*0.2；
rangeV.innerHTML=`${range.value}cm`；
rangeV.style.left=`calc（${newValue}%+（${newPosition}px））`；
常数newValue2=数字(
（（range2.value-range2.min）*100）/（range2.max-range2.min）
);
常数newPosition2=10-新值2*0.2；
rangeV2.innerHTML=`${range2.value}kg`；
rangeV2.style.left=`calc（${newValue2}%+（${newPosition2}px））`；
};
document.addEventListener（“DOMContentLoaded”，setValue）；
range.addEventListener（“输入”，设置值）；
范围2.addEventListener（“输入”，设置值）；
//设置两个输入的默认值
document.getElementById（'range'）。值=185；
document.getElementById（'range2'）。值=150；
}, []);
//选择值效应
功能选择影响高度（e）{
常数val=（e.target.value-150）*1.42；
e、 target.style.background=
“线性渐变（向右，#fff 0%，#fff”+
瓦尔+
“%，#f0959a”+
瓦尔+
“%，#f0959a 100%）”；
}
功能选择影响权重（e）{
常数val=（e.target.value-50）*0.5；
e、 target.style.background=
“线性渐变（向右，#fff 0%，#fff”+
瓦尔+
“%，#f0959a”+
瓦尔+
“%，#f0959a 100%）”；
}
返回(
高度

{props.Height}cm
重量

{道具重量}千克
);
}
导出默认范围我是新的反应，但我想我可以帮你，只是想明确一点，当你将最小-最大值向右更改时，你希望白色条向左移动？更具体一点。如果你抓住滑块拇指并一直向左移动，将不会有白色，只有与背景相似的颜色。如果你一直向右移动，只有白色的条。一直向左表示最小值，一直向右表示最大值。我认为问题在于Range.js文件中的selectedEffect函数。它根据输入值改变白色背景，我不知道如何使用不同的值，而不仅仅是最小值：1和最大值：100。我会感谢你的帮助。谢谢谢谢你的澄清，我正在研究它，我试着改变selectedEffect函数，但是它完全去除了白色，即使是在幻灯片上。我正在研究它，如果你得到任何解决方案，请告诉我。正如我所说的，我在stackoverflow或google上找到了该函数。我发现很少有类似的问题，这就是答案。在我尝试改变他们的价值观之前，我真的很高兴它真的起作用了。我不知道是否有更好的方法：/