Javascript 如何使用范围滑块显示此类变量数据

资料

范围滑块应第一次根据订户计数移动2500次，第二次应为5000，依此类推，并打印与订户计数相关的金额。前三个是双倍的，但第三个是两万五千，这就是问题所在。我应该做什么样的计算，或者有没有其他方法 代码

var slider=document.getElementById（“myRange”）；
var输出=document.getElementById（“演示”）；
output.innerHTML=slider.value；
slider.oninput=函数（）{
output.innerHTML=this.value
}

.slidecontainer{
宽度：100%；
}
.滑块{
-webkit外观：无；
宽度：100%；
高度：25px；
背景#d3；
大纲：无；
不透明度：0.7；
-webkit转换：.2s；
转变：不透明度；
}
.滑块：悬停{
不透明度：1；
}
.滑块：：-webkit滑块拇指{
-webkit外观：无；
外观：无；
宽度：25px；
高度：25px；
背景#4CAF50；
光标：指针；
}
.滑块：：-moz范围拇指{
宽度：25px；
高度：25px；
背景#4CAF50；
光标：指针；
}

订户：

价格:10

我将设置一个数组，其中包含要显示的值：

amount: 10
subscriber_count: 2500

amount: 20
subscriber_count: 5000

amount: 30
subscriber_count: 10000

amount: 40
subscriber_count: 25000

amount: 50
subscriber_count: 50000

amount: 60
subscriber_count: 100000

amount: 70
subscriber_count: 200000

amount: 80
subscriber_count: 300000  

之后，修改滑块，使其以1的步长递增/递减（并将其最大值设置为数组的长度-1）

---

我将设置一个数组，其中包含要显示的值：

amount: 10
subscriber_count: 2500

amount: 20
subscriber_count: 5000

amount: 30
subscriber_count: 10000

amount: 40
subscriber_count: 25000

amount: 50
subscriber_count: 50000

amount: 60
subscriber_count: 100000

amount: 70
subscriber_count: 200000

amount: 80
subscriber_count: 300000  

之后，修改滑块，使其以1的步长递增/递减（并将其最大值设置为数组的长度-1）

---

您可以使用函数获取最接近的数量。您可以使用订户计数进行相同的操作

var-arr=[{
金额：10，
用户数量：2500
},
{
金额：20，
用户数量：5000
},
{
金额：30，
用户数量：10000
},
{
金额：40，
用户数量：25000
},
{
金额：50，
用户数量：50000
},
{
金额：60，
用户数量：100000
},
{
金额：70，
用户数量：200000
},
{
金额：80，
用户数量：300000
}
]
var slider=document.getElementById（“myRange”）；
var输出=document.getElementById（“演示”）；
var output2=document.getElementById（“demo2”）；
output.innerHTML=slider.value；
slider.oninput=函数（）{
output.innerHTML=getClosest（this.value，'subscriber_count'）；
output2.innerHTML=getClosest（this.value，'amount'）；
}
函数getClosest（val，键）{
返回arr.reduce（函数（上、当前）{
返回（Math.abs（curr.subscriber\u count-parseInt（val））

.slidecontainer{
宽度：100%；
}
.滑块{
-webkit外观：无；
宽度：100%；
高度：25px；
背景#d3；
大纲：无；
不透明度：0.7；
-webkit转换：.2s；
转变：不透明度；
}
.滑块：悬停{
不透明度：1；
}
.滑块：：-webkit滑块拇指{
-webkit外观：无；
外观：无；
宽度：25px；
高度：25px；
背景#4CAF50；
光标：指针；
}
.滑块：：-moz范围拇指{
宽度：25px；
高度：25px；
背景#4CAF50；
光标：指针；
}

订户：

价格：

您可以使用函数获取最接近的金额。您可以使用订户计数进行相同的操作

var-arr=[{
金额：10，
用户数量：2500
},
{
金额：20，
用户数量：5000
},
{
金额：30，
用户数量：10000
},
{
金额：40，
用户数量：25000
},
{
金额：50，
用户数量：50000
},
{
金额：60，
用户数量：100000
},
{
金额：70，
用户数量：200000
},
{
金额：80，
用户数量：300000
}
]
var slider=document.getElementById（“myRange”）；
var输出=document.getElementById（“演示”）；
var output2=document.getElementById（“demo2”）；
output.innerHTML=slider.value；
slider.oninput=函数（）{
output.innerHTML=getClosest（this.value，'subscriber_count'）；
output2.innerHTML=getClosest（this.value，'amount'）；
}
函数getClosest（val，键）{
返回arr.reduce（函数（上、当前）{
返回（Math.abs（curr.subscriber\u count-parseInt（val））

.slidecontainer{
宽度：100%；
}
.滑块{
-webkit外观：无；
宽度：100%；
高度：25px；
背景#d3；
大纲：无；
不透明度：0.7；
-webkit转换：.2s；
转变：不透明度；
}
.滑块：悬停{
不透明度：1；
}
.滑块：：-webkit滑块拇指{
-webkit外观：无；
外观：无；
宽度：25px；
高度：25px；
背景#4CAF50；
光标：指针；
}
.滑块：：-moz范围拇指{
宽度：25px；
高度：25px；
背景#4CAF50；
光标：指针；
}

订户：

价格：

有多种方法可供选择。你应该试试，如果不行，你可以问为什么。我们避免您要求他人为您编写代码的问题，但我们可以修复您的代码。你的问题也不清楚预期会发生什么。建议：创建一个地图，他们的关键是10,20,30。。。数值是2500，5000，10000，用它来显示数值（你可能需要反向贴图），我刚刚遇到了与范围滑块相同的问题。。。但仍然无法找到解决方案。看起来每个浏览器不仅渲染滑块的方式不同，而且更新滑块的方式也不同。在我的情况下，我是在角度和范围滑块的工作并没有更新，因为你们改变它的参数（最小，最大，值）动态。。。但是找不到强制更新的方法…当（如果）数据列表得到广泛支持时，您可以使用数据列表向每个步骤添加标签。请注意，现在还没有任何浏览器支持它，但我会在这里留下一个指向它的指针，以防将来支持它。有多种方法可以做到这一点。Y

 <input type="range" min="0" max="7" value="0" class="slider" step="1" id="myRange">

output.innerHTML = myValues[0];
slider.oninput = function() {
  output.innerHTML = myValues[parseInt(this.value)];
}