html - 将数据绑定到一个简单的范围滑块

Question

我需要将输入字段绑定到滑块

<input id="testScore" type="text" min="0" max="100" name="testScore" value="{{testForm.testScore}}" ng-model="testForm.testScore" ng-pattern="onlyNumbers"><span id="unit">%</span>
<input class="progress-slider" type="range" min="0" max="100" ng-model="testForm.testScore">
<div class="inner" ng-style="{ width: selectedRange + '%' || '0%' }"></div>

因此，当我将文本类型指定为“数字”时，我可以输入更改滑块位置的输入，甚至可以获取范围，但是当我尝试移动滑块时，输入字段值不会显示。就像只有一种方式绑定一样。

但是，当我将类型指定为“文本”时，它会以两种方式绑定，在输入中输入值会移动滑块以及移动滑块会更改输入值，但我无法让它的范围为 0-100，因为它是文本类型输入。

有没有办法通过两种方式绑定并定义最小和最大范围来解决它。