CODEWITHSUNDEEP
javascripthtml
Charan Raj
Charan Raj

Reputation: 17

Setting up range slider in html

I want to setup two range sliders in html page and first range slider should not cross the second range slider max value and second slider should not cross the min value of first slider, how do I achieve this. 

Min.Length<br><input type="range" id="range_01" name="MinlenRange" min="0" max="100" value="8" oninput="this.form.MinlenInput.value=this.value" />
	             <input type="number" name="MinlenInput" min="0" max="100" value="8" oninput="this.form.MinlenRange.value=this.value" onkeyup="checkLength1(this)" /><br>
   Max.Length<br><input type="range" name="MaxlenRange" min="0" max="100" value="60" oninput="this.form.MaxlenInput.value=this.value" />
	             <input type="number" name="MaxlenInput" min="0" max="100" value="60" oninput="this.form.MaxlenRange.value=this.value" onkeyup="checkLength1(this)" /><br>

Upvotes: 0

Views: 465

Answers (2)

JoshG
JoshG

Reputation: 6735

You seem to have two issues. The first, as @JeremyThille pointed out, is you should wrap your form in a <form> element. To solve the second issue (preventing sliders from crossing each other), when the range values change, you need to check to see if they are greater/less than the value in the other range slider. If so, you can change the value accordingly.

I added IDs to your second slider and the text inputs next to each slider, just for this demo. You can refer to them in any way you'd like. I also removed the call to checkLength in the onkeyup attribute of your text inputs.

Note that in the snippet below, you can move the slider handle past the min/max point, but when you let go of the mouse it will snap back to the correct position. 

range_01.addEventListener("change", checkMax);
range_01_text.addEventListener("change", checkMax);
range_02.addEventListener("change", checkMin);
range_02_text.addEventListener("change", checkMin);

function checkMax(event) {
  if (parseInt(event.target.value) >= parseInt(range_02.value)) {
    range_01.value = range_02.value;
    range_01_text.value = range_02_text.value;
  }
}

function checkMin(event) {
  if (parseInt(event.target.value) <= parseInt(range_01.value)) {
    range_02.value = range_01.value;
    range_02_text.value = range_01_text.value;
  }
}
<form>
  Min.Length<br><input type="range" id="range_01" name="MinlenRange" min="0" max="100" value="8" oninput="this.form.MinlenInput.value=this.value" />
  <input type="number" id="range_01_text" name="MinlenInput" min="0" max="100" value="8" oninput="this.form.MinlenRange.value=this.value" /><br> Max.Length
  <br><input type="range" id="range_02" name="MaxlenRange" min="0" max="100" value="60" oninput="this.form.MaxlenInput.value=this.value" />
  <input type="number" id="range_02_text" name="MaxlenInput" min="0" max="100" value="60" oninput="this.form.MaxlenRange.value=this.value" /><br>
</form>

Upvotes: 0

Jeremy Thille
Jeremy Thille

Reputation: 26360

The error is : Cannot read property 'MinlenInput' of null, meaning form is null/undefined.

Just wrap your code in a <form> :

<form>
  Min.Length<br><input type="range" id="range_01" name="MinlenRange" min="0" max="100" value="8" oninput="this.form.MinlenInput.value=this.value" />
  <input type="number" name="MinlenInput" min="0" max="100" value="8" oninput="this.form.MinlenRange.value=this.value" onkeyup="checkLength1(this)" /><br> Max.Length
  <br><input type="range" name="MaxlenRange" min="0" max="100" value="60" oninput="this.form.MaxlenInput.value=this.value" />
  <input type="number" name="MaxlenInput" min="0" max="100" value="60" oninput="this.form.MaxlenRange.value=this.value" onkeyup="checkLength1(this)" /><br>
</form>

Upvotes: 1

Related Questions