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>