我想使用滑块控件来输入选择。可能的值为: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/ http://jsfiddle.net/au14Lv2t/1/
此解决方案的问题在于它允许使用无效值,例如 10000、15000 等。
我正在寻找 AngularJS(或纯 HTML5/JS/CSS)解决方案。我不想介绍 jQuery。
Thanks!
您可以搜索最接近的有效值并将每个值更改事件的输入值设置为该值
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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)