html javascript中的范围滑块

我在stackoverflow上找到了这段代码，但我无法将其更改为更改默认值，例如，我希望它在页面加载时从20开始，而不是从0开始，并在80结束，而不是从100结束。我试图更改html中的value和max，但没有成功。有人能帮我吗？谢谢代码只针对0-100个值编写。简单地更改最小值和最大值是没有帮助的

    <div sign style="left:0%;">
      <span id="value">20</span>
    </div>
    <div sign style="left:100%;">
      <span id="value">80</span>
    </div>
  </div>
  <input id="age1Slider" type="range" name="info[age1]" value="20" max="80" min="20" step="1" />
  <input id="age2Slider" type="range" name="info[age2]" value="80" max="80" min="20" step="1" />

重要的更改是

let value=（（this.value-parseInt（this.min））/（parseInt（this.max）-parseInt（this.min））*100

你可以在这里看到一个完整的例子

---

您仍然需要在HTML中的8个位置更改最大值和最小值

嗯，这么多的内联逻辑，这看起来很混乱。。。如果您在Stackoverflow上找到此代码，则不值得复制它：/Stop using inline JS。看见调试非常困难

我试图更改html中的value和max

在哪里？它们仍然是

min=0，max=100

我对javascript不是很精通，我在这里@JeremyThille找到了代码我发布了原始代码，在本地我试图更改值

document.getElementById('age1Slider').oninput = function age1(){
  this.value=Math.min(this.value,this.parentNode.childNodes[5].value-1);
  let value = ((this.value - parseInt(this.min))/(parseInt(this.max) - parseInt(this.min)))*100
  var children = this.parentNode.childNodes[1].childNodes;
  children[1].style.width=value+'%';
  children[5].style.left=value+'%';
  children[7].style.left=value+'%';
  children[11].style.left=value+'%';
  children[11].childNodes[1].innerHTML=this.value;
}

document.getElementById('age2Slider').oninput = function age2(){
  this.value=Math.max(this.value,this.parentNode.childNodes[3].value-(-1));
  let value = ((this.value - parseInt(this.min))/(parseInt(this.max) - parseInt(this.min)))*100
  var children = this.parentNode.childNodes[1].childNodes;
  children[3].style.width=(100-value)+'%';
  children[5].style.right=(100-value)+'%';
  children[9].style.left=value+'%';
  children[13].style.left=value+'%';
  children[13].childNodes[1].innerHTML=this.value;
}