How to prevent triggering of indirect click


#1

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

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

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?


#2

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:

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

Let me know if this helps!

Kind regards,
Isti