javascript - 如何结合范围滑块清空输入字段？

Question

我有一个带有最小值和最大值的范围滑块，它由 ng-model 与输入字段绑定。但是不可能有一个空的输入字段，通过退格输入字段的值始终是最小值或指定最小值和最大值之间的中间值。

如何使输入字段在退格上也为空，以便用户可以填写自己的值？

示例：如果用户想填写例如 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)'
     + ')';
}

标签： javascripthtmlangularjsangularinput