Range slider in html javascript

Question

I found this code on stackoverflow but I can't change it to change the default values, for example I would like it to start from 20 instead of 0 and end at 80 instead of 100 when the page loads. I tried to change value and max in html but it didn't work. Could anyone help me? Thanks 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>

EDIT: I solved it, thank you all!

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

Yurgh, so much inline logic, this looks so messy... If you found this code on Stackoverflow, it wasn't worth copying it :/ — Jeremy Thille, May 21 '20 at 11:18
`I tried to change value and max in html` where? They're still `min=0, max=100` — Jeremy Thille, May 21 '20 at 11:19
I'm not very expert in javascript, I found the code here https://stackoverflow.com/questions/4753946/html5-slider-with-two-inputs-possible — Gae, May 21 '20 at 11:21
@JeremyThille I posted the original code, locally I tried to change the values — Gae, May 21 '20 at 11:22
Well that's what you shoud put in your question :) Your attempt, so we can help you debug it. With the link to the original code for reference — Jeremy Thille, May 21 '20 at 11:24
`id="value"` is a duplicate; you can't have the same ID multiple times in a document. — Jeremy Thille, May 21 '20 at 11:25

HackLab · Accepted Answer · 2020-05-21T12:21:17.910

The code is written for 0 - 100 values only. Simply changing the min and max won't help.

    <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" />

I also extracted the code from the inline js to 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;
}

The important change was let value = ((this.value - parseInt(this.min))/(parseInt(this.max) - parseInt(this.min)))*100.

A full Example you can see here https://jsfiddle.net/HackLab/p2tcwaub/

You still have to change max and min in HTML in 8 places!

Range slider in html javascript

1 Answers1