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?
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: