Change the Value of a Range Element With a Variable using Js in Html-CodePudding

I can't find an answer for this anywhere, so here it goes.

In my html I have a slider, which has values from 0 to 10,000. It will be hard to get to a certain number by just going at it, so I added a couple of span elements that use onclick" " events that are supposed to add/subtract 1/10 depending on which one you press. In order for this to work, I need to retrieve the value of the slider, add/sub 1/10, and change the value of the slider. The problem with this, as from the title, is that I need a variable(at least I suppose), but when I use one, it for some reason sets it to the max value without quotes(" ") and doesn't change whenever I use them. This is confusing as it should be simple but stuff isn't working and I don't understand why. Here is my full code:

<!DOCTYPE HTML>
<html>
  <head>
    <title></title>
    <style>
      span {
        margin: 8px;
        font-size: 30px;
      }
      input[type="range"] {
        margin-top: 15px;
      }
    </style>
  </head>
  <body>
    <div style="text-align: center">
      <span onclick="downTen()"><<</span>
      <span onclick="downOne()">-</span>
      <input type="range" id="range" min="0" max="10000" oninput="this.nextElementSibling.value = this.value">
      <output>5000</output>
      <span onclick="upOne()"> </span>
      <span>>></span>
    </div>
    <script>
      function downTen() {
        let downDiez = document.getElementById("range").value;
        downDiez -= 10;
        document.getElementById("range").value = downDiez;
        console.log(document.getElementById("range").value);
      }
      function downOne() {
        let downUno = document.getElementById("range").value;
        downUno -= 1;
        document.getElementById("range").value = downUno;
        console.log(document.getElementById("range").value);
      }
      function upOne() {
        let upUno = document.getElementById("range").value;
        upUno  = 1;
        document.getElementById("range").value = upUno;
        console.log(document.getElementById("range").value);
      }
      function upTen() {
        
      }
    </script>
  </body>
</html>

Please help as I need this for a fun project for myself and I gave myself a deadline. I hope this explains everything.

Edit: I've realized it works with subtraction, but addition is buggy.

CodePudding user response：

inputs that use numbers like this slider store their values as strings not numbers, so you need to convert this to a number. you also had upUno as a let whereas var is better if you are going to change it. and you put quotations around the upUno var when trying to update the slider value. I've made the corrections here.

    function upOne() {
    var upUno = Number(document.getElementById("range").value);
    upUno  = 1;
    document.getElementById("range").value = upUno;
    console.log(document.getElementById("range").value);
  }

CodePudding user response：

Just need to convert the input to a number before incrementing:

function upOne() {
  const input = document.getElementById("range");
  const value = Number(input.value)   1;
  
  input.value = value;
  input.dispatchEvent(new InputEvent('input'));
}

<div style="text-align: center">
  <input type="range" id="range" min="0" max="10000" oninput="this.nextElementSibling.innerText = this.value">
  <output>5000</output>
  <span onclick="upOne()"> </span>
</div>

I also fixed your event handler and made sure it got triggered. (There are cleaner ways to deal with events though.)