HTML range type input enforced minimum without changing start of the range

Question

I want to enforce minimum of 50 on a range input, but still have the range visually start at 0, so that when the input is set to 50, the slider is in the middle and the user is unable to push the slider lower.

To put the problem another way, I want the value to be 50, I want the slider to be in the middle, and I want the user to not be allowed to decrease the slider.

When I use this, the slider is at the far left, and when the slider is in the middle, it represents 75. This is not the behavior I am looking for.

<input type="range" min="50" max="100" value="50"/>

How can I enforce a minimum value on a range input without setting the start of the range as the minimum?

"I want to enforce minimum of 50 on a range input, but still have the range start at 0." Not possible. If it can start at 0, then the minimum is 0, not 50. — Scott Marcus
– Scott Marcus, Commented Jul 11, 2017 at 21:26
I want visually the start to be 0, but to prevent users from sliding the slider below the minimum that I set. — Goose
– Goose, Commented Jul 11, 2017 at 21:30

falinsky · Accepted Answer · 2018-05-22 06:37:17Z

2

You'll have to have the range control set to allow a minimum of zero, but then via JavaScript reset that to 50 when the user tries to go below it.

NOTE that the input event is not universally supported on range elements, so you'll need to set up the same function in a change event handler as well.

var slider = document.getElementById("slider");
var output = document.getElementById("output");

// Set up an event handler for when the slider is changed
// To accomodate all browsers (IE), two events need to be set up.
slider.addEventListener("input", fixSlider);
slider.addEventListener("change", fixSlider);

function fixSlider(evt){
  // If the value goes below 50, reset it to 50
  if(parseInt(this.value,10) < 50){
    this.value = 50;
  }
  output.textContent = this.value;
}

<input type="range" min="0" max="100" value="50" id="slider"><span id="output">50</span>

edited May 22, 2018 at 6:37

falinsky

7,4454 gold badges34 silver badges59 bronze badges

answered Jul 11, 2017 at 21:34

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

falinsky · Accepted Answer · 2017-07-11 21:27:52Z

0

You set current value to be equal to minimum value - so it looks like that you have range start equals to 0 but actually it's indeed 50.

answered Jul 11, 2017 at 21:27

falinsky

7,4454 gold badges34 silver badges59 bronze badges

3 Comments

Scott Marcus Over a year ago

Based on OPs statement that he wants to enforce a minimum value of 50, a value of 0 could never be allowed.

Goose Over a year ago

I understand. I want the value to be 50, I want the slider to be in the middle, and I want the user to not be allowed to decrease the slider.

falinsky Over a year ago

@Goose I think then you should use some 3rd party widget instead of input type="range"

Collectives™ on Stack Overflow

HTML range type input enforced minimum without changing start of the range

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related