How to prevent triggering of indirect click


I need to put a range and a number component side by side, so they are structured like:

<label for="id">
  <input type="range" id="other">
  <input type="number" id="id">

and looked like:

it almost works only except when I click (not drag) on the slider, it will trigger the number component as well, but I only what to trigger the number component by either click on the label text or click on the number component itself.

I’ve tried to bind a click handler to stop its bubble up, but it didn’t work, how am I suppose to do next?


Hi there!

The problem is, that you’re wrapping 2 inputs inside a single label. There are two ways to associate labels to inputs:
1 - use the for attribute on the label by specifying the input’s id as value
2 - wrap the input inside the label, in this case the for attribute is irrelevant.

In short: wrapping 2 inputs in the same label is not valid html.
To solve this, you need to use a div, and a label inside:

  <label for="id">text...</label>
  <input type="range" id="other">
  <input type="number" id="id">

Let me know if this helps!

Kind regards,