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

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.


According to @James Donnelly's answer

I think your solution here is to add some JS for make your own check.

Change a boolean when user change the value and ask for change.

Here a solution that can help you.

var rangechanged=false;

$("#submit").click(function(){checkRange()});

function checkRange()
{
  console.log(rangechanged);
   if(rangechanged==false)
     alert("You must lock the range first");
  
   return rangechanged; 
}

$("#lockrange").click(function(){
  rangechanged=true;
  $("#lockrange").hide();
});

$("#range").change(function(){
  rangechanged=true;
  $("#lockrange").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
<input name="testing" id="range" type="range" min="0" max="10" step="1">
<button type="button" id="lockrange">Lock range</button>
<button type="button" id="submit">Submit</button>
</form>

Tags:

Html