HTML5输入类型范围-非线性序列？

Question

我想使用滑块控件输入选择。 可能的值为：5000，25000，50000，75000和100000。但是，我无法获得将范围输入限制为这些选择的值。 我最接近的是：

<datalist id="valid-options">
  <option>5000</option>
  <option>25000</option>
  <option>50000</option>
  <option>75000</option>
  <option>100000</option>
</datalist>
<input type="range" min="5000" max="100000" step="5000" list="valid-options" ng-model="selectedValue" />

您可以在此处看到完整的示例： http : //jsfiddle.net/au14Lv2t/1/

该解决方案的问题在于它允许使用无效值，例如10000、15000等。

我正在寻找AngularJS（或纯HTML5 / JS / CSS）解决方案。 我宁愿不介绍jQuery。

谢谢！

Answer 1

您可以搜索最接近的有效值并将每个值更改事件的输入值设置为该值

var inputElement = document.getElementById('customRangeInput');

inputElement.oninput = setInput;
inputElement.onchange = setInput;   // IE fix

function setInput(){
    inputElement.value = closestValue(inputElement.value);
}

var validValues = [5000,25000,50000,75000,100000];
function closestValue(input)
{
    var differences = [];
    for (var i = 0; i < validValues.length; i++)    
        differences.push( Math.abs(validValues[i] - input));

    var index = indexOfSmallest(differences);
    return validValues[index];      
}

function indexOfSmallest(inputArray) {
    var lowest = 0;
    for (var i = 1; i < inputArray.length; i++) {
        if (inputArray[i] < inputArray[lowest]) lowest = i;
    }
    return lowest;
}

html应该看起来像这样

<input id="customRangeInput" type="range" min="5000" max="100000" step="5000" list="valid-options" ng-model="selectedValue" />Selected Value: {{ selectedValue }}</div>

Answer 2

您需要使用属性步骤，让我们决定每个步骤有多少，以您的示例为例，大多数值都在25000中，所以使step =“ 25000”

<input type="range" min="0" max="100000" step="25000">

并求解5000值...在您的示例中，您的第一个值是5000，您要做的就是，如果收到0即您的低值即5000 ...其他值增加25000 ...希望有帮助。

并且在这种情况下，您不需要数据列表。

Answer 3

可以尝试使用范围滑块在其上操作的地图，而不是尝试直接使用这些值-因此，您的ng-model类似于myrangeIndex ，当您绑定输出元素时，可以使用rangeValues[myrangeIndex]来获取该值。 同样，当您在其他地方使用该值时，则需要先查找它。 如果您知道以后元素列表可能会增加/缩小，则可以使用max="{{rangeValues.length}}"以便只需要在一个地方更新代码。 如果可以从顺序值中计算出值，则可以在加载控制器时简单地填充rangeValues，例如$scope.rangeValues = f(1,100); 对于任何给定的f 。