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

Question

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.

Answer 1

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.

Answer 2

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>

Answer 3

You can add an attribute "value", and set to 0,Ex:

<input type="range" min="0" max="10" value="0" />

I hope it's will help you

Answer 4

The easiest solution is just to add a custom attribute HTML5 Custom Data Attributes (data-*) e.g. named data-value. In HTML: <input name="testing" type="range" min="0" max="10" step="1" data-value="">. In back-end update both attributes, value and custom one, e.g. in PHP echo '<input name="testing" type="range" min="0" max="10" step="1" value="'.$answer.'" data-value="'.$answer'">';

And then check in JS:

if($(this).hasClass())
    var value = $(this).attr("data=value");
    if(value.length){
        alert("Please answer the question.");
    }
}

Answer 5

What you have to do, is that after you have created your input ranger, use jquery to render those ranges to 0, and it will work

Answer 6

• what worked for me is creating a hidden input that would keep track of value changes in the slider with a default value of "-1"
• that way when the server process the form , i can find all the hidden field whose value have been changed , since input type range does not allow for empty value
• since my slider has tick marks i cant use the -1 value for the input soultion

:root {
  --range-slider-size: 6px;
  --thumb-height: calc(var(--range-slider-size)*4)
}

.integer-range-wrapper {
  padding-bottom: calc(var(--range-slider-size) * 2);
  padding-top: calc(var(--range-slider-size) * 2);
}


.ticks {
  display: flex;
  justify-content: space-between;
  padding: var(--range-slider-size) calc(var(--range-slider-size) * 2);
}

.tick {
  position: relative;
  display: flex;
  justify-content: center;
  width: 1px;
  background: gray;
  height: var(--range-slider-size);
  line-height: calc(var(--range-slider-size) * 6);
  margin-bottom: calc(var(--range-slider-size) * 2);
}

input[type=range] {
  -webkit-appearance: none;
  display: block;
  margin: 0;
  width: 100%;
  background: transparent;
}


input[type=range]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  width: 100%;
  height: calc(var(--range-slider-size) * 4);
  color: transparent;
  background: lightgray;
  border-radius: 999px;
  border: none;
}

input[type=range]::-moz-range-track {
  -webkit-appearance: none;
  width: 100%;
  height: var(--thumb-height);
  color: transparent;
  background: lightgray;
  border-radius: 999px;
  border: none;
}

input[type=range]::-ms-track {
  -webkit-appearance: none;
  width: 100%;
  height: var(--thumb-height);
  color: transparent;
  background: lightgray;
  border-radius: 999px;
  border: none;
}

input[type=range]::-ms-fill-lower {
  display: none;
}

input[type=range]::-ms-fill-upper {
  display: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: var(--thumb-height);
  width: var(--thumb-height);
  border-radius: 30px;
  background: black;
  box-shadow: 0px 2px 10px -2px;
}

input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  height: var(--thumb-height);
  width: var(--thumb-height);
  border-radius: 30px;
  background: black;
  box-shadow: 0px 2px 10px -2px;
}

input[type=range]::-ms-thumb {
  -webkit-appearance: none;
  height: var(--thumb-height);
  width: var(--thumb-height);
  border-radius: 30px;
  background: black;
  box-shadow: 0px 2px 10px -2px;
}

 <div class="integer-range-wrapper">
   <input type="range" name="foo" id="foo" max="5" min="0" value="0" oninput="document.getElementById('hidden-foo').value=this.value">
   <input hidden name="hidden-foo" id="hidden-foo" value="-1">

   <div class="ticks">
     <span class="tick">0</span>
     <span class="tick">1</span>
     <span class="tick">2</span>
     <span class="tick">3</span>
     <span class="tick">4</span>
     <span class="tick">5</span>
   </div>
 </div>

Answer 7

use js to do it:

var input = document.getElementById('inputSlider')
input.value = 0