Javascript 滑块范围组件中0处的固定点

滑块具有范围、最大值、最小值和两个可能的值。其中一个值设置为0，另一个值可以拖动以更改我的网站中的值，我尝试构建一个范围为-10到10的滑块。滑块中有两个可能的值输入，一个值为0，它是固定的。另一个值可以根据该值拖动并显示为0的值

我最初想禁用其中一个值输入，但不起作用，我想显示如下：

[-10]|--------------------|[0]|-----------------------------------------[10]

或

[-10]|--------------------|[0]|-----------------------------------------[10]

但不像从-10开始

[-10]|---------------------------------------|[10]

它将渲染从0到10或0到-10的范围，但不会渲染从-10到点的范围。0作为滑块中的固定数字

---

我不知道从哪里开始，如果您有任何建议，我们将不胜感激。

您可以收听输入事件，并防止出现比您想要的少/多的情况。我做了点小改动。但是你必须把第二个输入的值乘以负数

const inputs=document.querySelectorAll（“输入”）；
inputs.forEach（p=>{
p、 addEventListener（“输入”，（）=>{
如果（event.target.value>=0）{
event.target.value=0；
}
如果（event.target.id==“inp1”）{
log（“第一个输入的值：”+event.target.value）
}
如果（event.target.id==“inp2”）{
console.log（“第二个输入的值：”+event.target.value*-1）
}
});
});
#inp2{
变换：旋转（180度）；
}
您可以监听输入事件并防止超出您所需的数量。我做了点小改动。但是你必须把第二个输入的值乘以负数


const inputs=document.querySelectorAll（“输入”）；
inputs.forEach（p=>{
p、 addEventListener（“输入”，（）=>{
如果（event.target.value>=0）{
event.target.value=0；
}
如果（event.target.id==“inp1”）{
log（“第一个输入的值：”+event.target.value）
}
如果（event.target.id==“inp2”）{
console.log（“第二个输入的值：”+event.target.value*-1）
}
});
});
#inp2{
变换：旋转（180度）；
}

您好，谢谢您的快速回复。我对进度条如何从0向两侧呈现感到困惑，因为起点是0。如果我有一个值5，那么在你的例子中，它将从-10渲染到5，而不是从0渲染到5。您可以设置任何想要的值。可以更改最小值和最大值。我不能完全理解你想要什么。嗨，抱歉搞混了。在inp2的情况下，如果我的值为5，那么它将显示从-10到5的进度条，我希望它只显示从0到5的进度条，从-10到0的进度条将不会显示，并且范围仍然是从-10到10。这是不可能的。您应该使用自定义滑块。喜欢定制的复选框。嗨，谢谢你的快速回复。我对进度条如何从0向两侧呈现感到困惑，因为起点是0。如果我有一个值5，那么在你的例子中，它将从-10渲染到5，而不是从0渲染到5。您可以设置任何想要的值。可以更改最小值和最大值。我不能完全理解你想要什么。嗨，抱歉搞混了。在inp2的情况下，如果我的值为5，那么它将显示从-10到5的进度条，我希望它只显示从0到5的进度条，从-10到0的进度条将不会显示，并且范围仍然是从-10到10。这是不可能的。您应该使用自定义滑块。比如定制的复选框。