Как очистить поле ввода в сочетании с ползунком диапазона? - PullRequest
0 голосов
/ 02 марта 2020

У меня есть ползунок диапазона с минимальным и максимальным значением, который связан 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)'
     + ')';
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...