范围 slider 在 html javascript

Question

我在 stackoverflow 上找到了这段代码，但我无法更改它来更改默认值，例如，我希望它在页面加载时从 20 而不是 0 开始并以 80 而不是 100 结束。 我尝试更改 html 中的值和最大值，但没有成功。 有人可以帮我吗？ 谢谢jsfiddle

    <div slider id="slider-distance">
<div>
<div inverse-left style="width:70%;"></div>
<div inverse-right style="width:70%;"></div>
<div range style="left:0%;right:0%;"></div>
<span thumb style="left:0%;"></span>
<span thumb style="left:100%;"></span>
<div sign style="left:0%;">
  <span id="value">0</span>
</div>
<div sign style="left:100%;">
  <span id="value">100</span>
</div>
</div>

<input type="range" name="info[age1]" value="0" max="100" min="0" step="1" oninput="
this.value=Math.min(this.value,this.parentNode.childNodes[5].value-1);
let value = (this.value/parseInt(this.max))*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;" />

<input type="range" name="info[age2]" value="100" max="100" min="0" step="1" oninput="
this.value=Math.max(this.value,this.parentNode.childNodes[3].value-(-1));
let value = (this.value/parseInt(this.max))*100
var children = this.parentNode.childNodes[1].childNodes;
children[3].style.width=(1`enter code here`00-value)+'%';
children[5].style.right=(100-value)+'%';
children[9].style.left=value+'%';children[13].style.left=value+'%';
children[13].childNodes[1].innerHTML=this.value;" />
</div>

编辑：我解决了，谢谢大家！

<div slider id="slider-distance">
<div>
<div inverse-left style="width:70%;"></div>
<div inverse-right style="width:70%;"></div>
<div range style="left:20%;right:0%;"></div>
<span thumb style="left:20%;"></span>
<span thumb style="left:100%;"></span>
<div sign style="left:20%;">
  <span>20</span>
</div>
<div sign style="left:100%;">
  <span>100</span>
</div>
</div>

<input type="range" name="info[age1]" value="20" max="100" min="0" step="1" oninput="
this.value=Math.min(this.value,this.parentNode.childNodes[5].value-1);
let value = (this.value/parseInt(this.max))*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;" />

<input type="range" name="info[age2]" value="100" max="100" min="0" step="1" oninput="
this.value=Math.max(this.value,this.parentNode.childNodes[3].value-(-1));
let value = (this.value/parseInt(this.max))*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;" />
</div>

Answer 1

该代码仅针对 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" />

我还将代码从内联 js 提取到 propper js。

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;
}

重要的变化是let value = ((this.value - parseInt(this.min))/(parseInt(this.max) - parseInt(this.min)))*100 。

您可以在此处查看完整示例https://jsfiddle.net/HackLab/p2tcwaub/

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