Question 42625 in Html Question posted in
Some basic documentation can be found here.

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:

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

function sliderx(value) {
  val = f(value, 1.0)
  console.log(val)
}
<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>

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?

Tags:

2

Answers


  1. 0 
    function f(x, y) {
  return x + y
}

function sliderx(value) {
  let val = f(value, 1.0)
  console.log(val)
}
function slidery(value) {
  let val = f(value, 1.0)
  console.log(val)
}
    <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="amountY.value=rangeInputY.value">
  <input type="range" id="rangeInputY" name="rangeInputY" step="0.05" min="0.0" max="1.0" value="get_min() " oninput="slidery(this.value)">
  <output name="amountY" for="rangeInputY"></output>
</form>
    Login or Signup to reply.
  2. 0

    Yes, there is a solution for your problem!

    To achieve your goal, you can define two global variables x and y to store the current values of the sliders, and update them whenever the slider values change. Then, you can calculate `f(x,y)` using the updated values of x and y, and log the result to the console. Also as your comments also mentioned IDs should be unique so stick with unique IDs and names for your elements. See: 

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=q, initial-scale=1.0" />
    <title>Document</title>
    <title>What's the date?</title>
  </head>
  <body>
    <h1>Slider Test</h1>
    <div id="myDiv"></div>
    <p>sliderx</p>
    <form oninput="amount.value=rangeInputX.value">
      <input
        type="range"
        id="sliderx"
        name="rangeInputX"
        step="0.05"
        min="0.0"
        max="1.0"
        value="get_min()"
        oninput="update()"
      />
      <output name="amount" for="sliderx"></output>
    </form>
    <p>slidery</p>
    <form oninput="amount.value=rangeInputY.value">
      <input
        type="range"
        id="slidery"
        name="rangeInputY"
        step="0.05"
        min="0.0"
        max="1.0"
        value="get_min()"
        oninput="update()"
      />
      <output name="amount" for="slidery"></output>
    </form>
    <script>
      //Initialize your sliders with current start values
      let sliderx = document.getElementById("sliderx");
      let slidery = document.getElementById("slidery");
      let x = sliderx.value;
      let y = slidery.value;
      console.log(x, y);

      function update() {
        x = parseFloat(sliderx.value);
        y = parseFloat(slidery.value);
        const result = f(x, y);
        console.log(
          ` ${x} (Value of sliderx:) + ${y} (Value of slidery) = ${result}`
        );
      }

      function f(x, y) {
        return x + y;
      }
    </script>
  </body>
</html>

    In this implementation, we define two global variables x and y to store the current values of the sliders. Whenever a slider value changes, the update function is called, which updates the values of x and y, calculates f(x,y), and logs the result to the console. The update function is called whenever either slider value changes, using the oninput attribute of the slider inputs. The output elements are associated with their corresponding slider inputs using the for attribute.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search