Почему preventDefault не работает для input range?

Question

[jTavez]

Нужно чтобы при достижении limit ползунок больше не двигался, и значение input:value не менялось. Не понимаю, почему preventDefault() не срабатывает. Если добавить return false то естественно блок #output перестает обновляться, но ползунок и value по-прежнему меняются.

Вот пен: https://codepen.io/anon/pen/bXweNG

<div class="wrapper">
  <input type="range" min="0" max="50" value="0" step="1" id="range">
  <div id="output"></div>
</div>

'use strict';
let range  = document.getElementById('range'),
    output = document.getElementById('output'),
    limit  = 10;

range.addEventListener('input', evt => {
  if(evt.target.value > limit){
    evt.preventDefault();
    return;
  }
  output.textContent = evt.target.value;
});

Comments

[Ярослав Иванов]

if(evt.target.value > limit){
    evt.preventDefault();
    evt.target.value = limit;
    return;
  }

[jTavez]

Ярослав Иванов, я знаю про такой вариант, не разве это не "костыль"? Получается мы обновляем value на limit вместо остановки ивента

[Ярослав Иванов]

jTavez, костыль это когда вместо исправления не совсем работающего кода вставляете еще один код. А тут лаконичное и логичное решение присваивать значение в input.