javascript - reset slider to initial values - Stack Overflow

admin管理员组

文章数量:1396440

I have defined these sliders in the HTML file:

<div>
body angle -180 <input id="bodySlider" type="range"
 min="-180" max="180" step="10" value="0"
  />
 180
</div>
<div id="leftArmSlider">
left arm angle -90 <input id="leftArmSlider" type="range"
 min="-90" max="-20" step="10" value="-20"
  />
 -20
</div>
</div>
<div id="rightArmSlider">
right arm angle 20 <input id="rightArmSlider" type="range"
 min="20" max="90" step="10" value="20"
  />
 90
</div>
<div>
left leg angle -30 <input id="leftLegSlider" type="range"
 min="-30" max="30" step="5" value="0"
  />
 30
</div>
<div>
right leg angle -30 <input id="rightLegSlider" type="range"
 min="-30" max="30" step="5" value="0"
  />
 30
</div>

and I wanna reset them to the initial values using a function in the JavaScript file. Is there a reset function or another way to do this?

I have defined these sliders in the HTML file:

<div>
body angle -180 <input id="bodySlider" type="range"
 min="-180" max="180" step="10" value="0"
  />
 180
</div>
<div id="leftArmSlider">
left arm angle -90 <input id="leftArmSlider" type="range"
 min="-90" max="-20" step="10" value="-20"
  />
 -20
</div>
</div>
<div id="rightArmSlider">
right arm angle 20 <input id="rightArmSlider" type="range"
 min="20" max="90" step="10" value="20"
  />
 90
</div>
<div>
left leg angle -30 <input id="leftLegSlider" type="range"
 min="-30" max="30" step="5" value="0"
  />
 30
</div>
<div>
right leg angle -30 <input id="rightLegSlider" type="range"
 min="-30" max="30" step="5" value="0"
  />
 30
</div>

and I wanna reset them to the initial values using a function in the JavaScript file. Is there a reset function or another way to do this?

• javascript
• html

Share Improve this question Follow edited May 22, 2017 at 15:00 user128511 asked May 22, 2017 at 13:34 B.juniorB.junior 3511 gold badge22 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

add a button for the reset.

<input id="reset" type="button" value="Reset">

and this is the reset function

document.getElementById('reset').onclick = function(){
   document.getElementById('bodySlider').value = 0;
   document.getElementById('leftArmSlider').value = -20;
   // .... etc
};

Be sure to not assign the same id on different HMTL element, id is thought to be unique.

another way is to wrap all the inputs inside a form and to reset the form

<form id="myForm">
<div>
body angle -180 <input id="bodySlider" type="range"
 min="-180" max="180" step="10" value="0"
  />
 180
</div>
<div>
left arm angle -90 <input id="leftArmSlider" type="range"
 min="-90" max="-20" step="10" value="-20"
  />
 -20
</div>
</div>
<div id="rightArmSlider">
right arm angle 20 <input id="rightArmSlider" type="range"
 min="20" max="90" step="10" value="20"
  />
 90
</div>
<div>
left leg angle -30 <input id="leftLegSlider" type="range"
 min="-30" max="30" step="5" value="0"
  />
 30
</div>
<div>
right leg angle -30 <input id="rightLegSlider" type="range"
 min="-30" max="30" step="5" value="0"
  />
 30
</div>

<input onclick="resetFunc()" type="button" value="Reset">
</form>

<script>
  function resetFunc(){
    document.getElementById("myForm").reset();
  }

</script>

本文标签： javascriptreset slider to initial valuesStack Overflow