Is there a way to set default value of range input to be empty?

Issue

I have a HTML5 range input

<input name="testing" type="range" min="0" max="10" step="1">

When there is no attribute "value" set, it sets the default value to the middle (i.e. 5 in this case). Is there a way to make it empty so that I know if the user has actively input something?

I have another div for value display. At the beginning the value will be "?", so the user will know they haven't input anything. The problem is to prevent the input from submitting value to backend if value is not actively set.

Solution

Unfortunately this is a restraint of the [type=range] element:

The default value is the minimum plus half the difference between the minimum and the maximum, unless the maximum is less than the minimum, in which case the default value is the minimum.

– HTML5 Specification

If you have no alternative other than to use this element, I'd suggest adding an extra value to your range, then checking for that value when validating the form. I.e. if your current range is 0 to 10, make your range -1 to 10, then default the value to -1; on the validation side, check if the value is not equal to -1.

Answered By - James Donnelly