Managing more than one slider in HTML

I’m new to html and recognize this may be a basic question. However I haven’t been able to find any examples of this sort of functionality yet. I’m trying to do math with the input from two different sliders. Thus far, my code looks like this:

<html>

<body>
  <h1> Slider Test</h1>

  <div id="myDiv"></div>
  <p> sliderx </p>
  <form oninput="amount.value=rangeInput.value">
    <input type="range" id="rangeInput" name="rangeInput" step="0.05" min="0.0" max="1.0" value="get_min() "
      oninput="sliderx(this.value)">
    <output name="amount" for="rangeInput"></output>
  </form>

  <p> slidery </p>
  <form oninput="amount.value=rangeInput.value">
    <input type="range" id="rangeInput" name="rangeInput" step="0.05" min="0.0" max="1.0" value="get_min() "
      oninput="slidery(this.value)">
    <output name="amount" for="rangeInput"></output>
  </form>

  <script>

    function f(x, y) {
      return x + y
    }

    function sliderx(value) {
      val = f(value, 1.0)
      console.log(val)
    }

  </script>
  </div>
</body>

</html>

I created two sliders (sliderx and slidery) and defined f(x,y) = x+y. My goal is to be able to print x+y to console.log. I can call silderx and my console updates accordingly for fixed y. However, I don’t see any good way to update y using slidery, while keeping x defined by sliderx. Is there any way to do this?