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

我想使用滑块控件来输入选择。可能的值为：5000,25000,50000,75000和100000.但是，我无法获取范围输入以限制这些选择。我得到的最接近的事情是这样的：HTML5输入类型范围 - 非线性序列？

<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。

谢谢！

来源

2014-10-29 dprothero

为什么不使用select来代替？ – serakfalcon 2014-10-29 21:59:42

看起来你将不得不使用自定义类型范围仿真。 – dfsq 2014-10-29 22:12:14

@serakfalcon UI设计需要一个滑块控件。尽管如此，这绝对是回退的状态。 – dprothero 2014-10-29 22:18:09

您可以搜索最接近的有效值和输入值设置为每个值变化事件值

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>

来源

2014-10-29 22:20:00

这在Chrome浏览器中很完美：http://jsfiddle.net/x7ssks7g/1/ – dprothero 2014-10-29 22:29:28

但是，在IE11中不起作用。 – dprothero 2014-10-29 22:29:53

我猜oninput事件不支持ie11。我会在一分钟内更新代码 – 2014-10-29 22:31:22

你需要使用属性的步骤，可以让你决定多少是步步为营，为你的榜样的，最值是25000 所以要一步=“25000”

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

，并解决5000价值...在你的例子中，你的第一个值是5000你所做的是，如果你收到0这是你的低值是5000 ...其他值增加25000 ...希望有所帮助。

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

来源

2014-10-29 22:14:12 xploshioOn

非常聪明的解决方案。如果我没有那么幸运，只有一个例外是25,000增量？我还有其他的选项不够“整洁”......如果我的选项列表是1,4,10,23,30，该怎么办？ – dprothero 2014-10-29 22:17:02

然后你必须写一些JavaScript的东西，像代码在这里，在其他答案，但特别是这种情况下，我认为这是一个简单的解决方案。 – xploshioOn 2014-10-29 22:37:00

，而不是试图用值可以使用范围滑块操作的地图 - 所以你的ng模型就像myrangeIndex，当你绑定你的输出元素时，你使用rangeValues[myrangeIndex]来取回数值。同样，当您在其他地方使用该值时，您需要先查看该值。如果您知道元素列表稍后可能会增长/缩小，则可以使用max="{{rangeValues.length}}"，这样您只需要在一个位置更新代码。如果可以从序数值计算值，则可以在加载控制器时简单地填充rangeValues，例如， $scope.rangeValues = f(1,100);任何给定f。

来源

2015-07-15 07:44:36

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

回答

相关问题