Javascript 如何更改范围滑块以显示金钱？

我发现这个滑块在上面

我如何让它显示我最低500欧元和最高6000欧元，但要保留红色背景

我什么都试过了

<input id = "range" type = "range" class = "range-slider" min = "500" max = "6000" step = "100">

正文{
填充：100px；
}
.范围滑块容器{
位置：相对位置；
}
输入[类型=范围]{
-webkit外观：无；
利润率：10px0；
宽度：100%；
位置：绝对位置；
排名：0；
保证金：0；
}
#范围值栏{
宽度：100%；
内容：“0”；
背景色：#FC6E50；
位置：绝对位置；
z指数：10000；
高度：25px；
排名：0；
保证金：0；
边界半径：5px；
}
/**/
#范围值{
宽度：25px；
内容：“0”；
背景：rgba（2332392440.1）；；
位置：绝对位置；
z指数：10000；
高度：25px；
顶部：-65px；
保证金：0；
边界半径：5px；
左：50%；
转化：translateX（-50%）；
字体大小：20px；
填充：12px；
颜色：#41576B；
盒影：0.2px10px 0 rgba（0,0,0,0.08）；
文本对齐：居中；
不透明度：0；
}
输入[类型=范围]：焦点{
大纲：无；
}
输入[类型=范围]：-webkit滑块可运行轨迹{
宽度：100%；
高度：25px；
光标：指针；
动画：0.2s；
盒影：0px 0px 0px 000000，0px 0px 0px 0d0d；
背景：E9EFF4；
边界半径：5px；
边框：0px实心#000101；
}
输入[类型=范围]：-webkit滑块拇指{
盒影：0.2px10px 0 rgba（0,0,0,0.08）；
边框：14px实心#FFF；
高度：53px；
宽度：53px；
边界半径：30px；
背景#FC6E50；
光标：指针；
-webkit外观：无；
最高保证金：-13.5px；
位置：相对位置；
z指数：100000000；
}
输入[类型=范围]：-moz范围轨迹{
宽度：100%；
高度：12.8px；
光标：指针；
动画：0.2s；
盒影：0px 0px 0px 000000，0px 0px 0px 0d0d；
背景：#000；
边界半径：25px；
边框：0px实心#000101；
}
输入[类型=范围]：-moz范围拇指{
盒影：0px 0px 0px 000000，0px 0px 0px 0d0d；
边框：0px实心#000000；
高度：20px；
宽度：39px；
边界半径：7px；
背景：#000000；
光标：指针；
}
输入[类型=范围]：-ms轨道{
宽度：100%；
高度：12.8px；
光标：指针；
动画：0.2s；
背景：透明；
边框颜色：透明；
边框宽度：39px0；
颜色：透明；
}
输入[类型=范围]：-ms填充下限{
背景：#000；
边框：0px实心#000101；
边界半径：50px；
盒影：0px 0px 0px 000000，0px 0px 0px 0d0d；
}
输入[类型=范围]：-ms填充上限{
背景：#000；
边框：0px实心#000101；
边界半径：50px；
盒影：0px 0px 0px 000000，0px 0px 0px 0d0d；
}
输入[类型=范围]：-ms thumb{
盒影：0px 0px 0px 000000，0px 0px 0px 0d0d；
边框：0px实心#000000；
高度：20px；
宽度：39px；
边界半径：7px；
背景：#000；
光标：指针；
}

0

只需调整显示值的javascript即可：

function rangeValueHandler() {
  rangeValueBar.style.setProperty('width', `${rangeSlider.value}%`);
  const moneyValue = Math.round(500 + 5500 * rangeSlider.value * 0.01);
  rangeValue.innerHTML = `\$ ${moneyValue}`;
}

---

我相信这就是您想要的，只需对范围滑块表单元素使用min和max属性，我要做的就是删除

rangeValueHandler

函数中的宽度样式

我必须计算宽度的百分比：

（（输入-最小值）*100）/（最大值-最小值）}%

const rangeSlider=document.querySelector（'.range slider'）；
const rangeValueBar=document.querySelector（“#范围值栏”）；
const rangeValue=document.querySelector（“#range value”）；
让isDown=false；
函数dragHandler（）{
isDown=！isDown；
如果（！isDown）{
rangeValue.style.setProperty（'opacity'，'1'）；
}否则{
rangeValue.style.setProperty（'opacity'，'1'）；
}
}
职能部门（e）{
如果（！isDown）返回；
rangeValueHandler（）；
}
函数rangeValueHandler（）{
百分比=`${（（rangeSlider.value-500）*100）/（6000-500）}%`；
rangeValueBar.style.setProperty（“宽度”，百分比）；
rangeValue.innerHTML=`${RangeSlaider.value}€`；
}
rangeValueHandler（）；
RangeSlaider.addEventListener（'mousedown'，dragHandler）；
rangeSlider.addEventListener（'mousemove'，dragOn）；
rangeSlider.addEventListener（'mouseup'，dragHandler）；
rangeSlider.addEventListener（'click'，rangeValueHandler）
正文{
填充：100px；
}
.范围滑块容器{
位置：相对位置；
}
输入[类型=范围]{
-webkit外观：无；
利润率：10px0；
宽度：100%；
位置：绝对位置；
排名：0；
保证金：0；
}
#范围值栏{
宽度：100%；
最大宽度：100%；
内容：“0”；
背景色：#FC6E50；
位置：绝对位置；
z指数：10000；
高度：25px；
排名：0；
保证金：0；
边界半径：5px；
}
/**/
#范围值{
宽度：自动；
内容：“0”；
背景：rgba（2332392440.1）；；
位置：绝对位置；
z指数：10000；
高度：25px；
顶部：-65px；
保证金：0；
边界半径：5px；
左：50%；
转化：translateX（-50%）；
字体大小：20px；
填充：12px；
颜色：#41576B；
盒影：0.2px10px 0 rgba（0,0,0,0.08）；
文本对齐：居中；
不透明度：0；
}
输入[类型=范围]：焦点{
大纲：无；
}
输入[类型=范围]：-webkit滑块可运行轨迹{
/*宽度：100%*/
高度：25px；
光标：指针；
动画：0.2s；
盒影：0px 0px 0px 000000，0px 0px 0px 0d0d；
背景：E9EFF4；
边界半径：5px；
边框：0px实心#000101；
}
输入[类型=范围]：-webkit滑块拇指{
盒影：0.2px10px 0 rgba（0,0,0,0.08）；
边框：14px实心#FFF；
高度：53px；
宽度：53px；
边界半径：30px；
背景#FC6E50；
光标：指针；
-webkit外观：无；
最高保证金：-13.5px；
位置：相对位置；
z指数：100000000；
}
输入[类型=范围]：-moz范围轨迹{
/*宽度：100%*/
高度：12.8px；
光标：指针；
动画：0.2s；
盒影：0px 0px 0px 000000，0px 0px 0px 0d0d；
背景：#000；
边界半径：25px；
边框：0px实心#000101；
}
输入[类型=范围]：-moz范围拇指{
盒影：0px 0px 0px 000000，0px 0px 0px 0d0d；
边框：0px实心#000000；
高度：20px；
宽度：39px；
边界半径：7px；
背景：#000000；
光标：po