У меня есть ползунок диапазона с минимальным и максимальным значением, который связан ng-моделью с полем ввода. Но пустое поле ввода невозможно, так как при возврате значение поля ввода всегда является минимальным значением или на полпути между указанным минимумом и максимумом.
Как сделать возможным, чтобы поле ввода было также пустой на backspace, так что пользователь может заполнить себя значением?
Пример: если пользователь хочет заполнить, например, 250 как значение, ему нужно выбрать значение в поле ввода с помощью сочетания клавиш CTRL + A и заменить значение на 250. Теперь невозможно изменить 1 ( от минимума) с 2 до 250. Другой вариант - с помощью стрелок на клавиатуре.
<input type="number"
ng-model="sliderElement.value"
ng-change="setRange()">
<input type="range"
ng-model="sliderElement.value"
min="{{rangeSliderMinValue}}" max="{{rangeSliderMaxValue}}"
step="{{rangeSliderStep}}"
ng-change="setRange()"/>
JS:
this.sliderElement.value = 50;
this.rangeSliderMinValue = 1;
this.rangeSliderMaxValue = 400;
this.rangeSliderStep = 1;
setRange() {
const rangeSliderElement = this.element[0].querySelector('.range-slider').getElementsByTagName('input')[0];
const val = (rangeSliderElement.value - this.rangeSliderMinValue) / (this.rangeSliderMaxValue - this.rangeSliderMinValue);
rangeSliderElement.style.backgroundImage = '-webkit-gradient(linear, left top, right top, '
+ 'color-stop(' + val + ', red), '
+ 'color-stop(' + val + ', green)'
+ ')';
}