1

I have a form with several range inputs. I would like to check that the user has at least clicked once on each range. 

<form>
  <input type="range" id="entry1" name="entry1">
  <input type="range" id="entry2" name="entry2">
</form>

The required attribute will not work with ranges as they have a default value. Checking if the value has changed doesn't work either as the value is set to the min or the max if the value is out of range. This is doubly frustrating as it prevents form validation rangeUnderflow from occurring even if value was set to a number under the min.

For additional clarification I want to be sure the user has interacted with the input. So if the value is set to min, the user should at least click on the slider even if he wants it to stay at min.

user2588770
  • 428
  • 1
  • 5
  • 11
  • What are your efforts so far? Have you tried looking it up? – Michelangelo Mar 10 '20 at 22:23
  • So if the user wants to have min on each range, they have to first change it and put it back? – trincot Mar 10 '20 at 22:23
  • Does this answer your question? [Detect if input was touched (tablet) or clicked (mouse)](https://stackoverflow.com/questions/37110501/detect-if-input-was-touched-tablet-or-clicked-mouse) – Michelangelo Mar 10 '20 at 22:24
  • Are you saying that the `change` event triggers if the initial value of the range is set below the min? – Garrett Motzner Mar 10 '20 at 22:26
  • Use the "click" event, as you have stated, on each input model. Store a flag in in an object or variable that is declared outside the click function handler – Cody Ｇ Mar 10 '20 at 22:37
  • @CodyＧ Thanks this is exactly what I needed. Is it ok to edit my question with code based on your solution to help people that may have the same problem ? – user2588770 Mar 10 '20 at 23:06
  • Yes it's OK to edit. It's hard to get your question re-opened. But you can definitely edit it. – Cody Ｇ Mar 10 '20 at 23:36

0 Answers0