我尝试为我的年份 slider 使用输入范围。
<input id="slider" min="1965" max="2012" step="10" value="1965" type="range">
但我的年份列表是 1965、1975、1985、1995、2005、2010、2011、2012。我需要在此 slider 中使用不同的步骤。一开始我想用10，一次改成5，再改成1。我的javascript是:
d3.select("#slider").on("change", function(){
$("#sliderValue").append(this.value);
});
提前致谢
最佳答案
我已经为你的问题准备了一个小解决方案。 Step 属性将取决于范围的当前值。
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript">
$(function() {
$('#years').on('input change', function() {
var
element = $('#years'),
value = element.val(),
step;
/*
Map your rules
*/
if (value < 1995) {
step = 20;
}
else {
step = 1;
}
element.attr('step', step);
$('#value').text(value);
$('#step').text(step);
});
});
</script>
</head>
<body>
<div>
Current value: <span id="value"></span>
</div>
<div>
Current step: <span id="step"></span>
</div>
<div>
<input id="years" type="range" value="1965" min="1965" max="2015" />
</div>
</body>
</html>
演示:https://jsfiddle.net/logual/7uLftnc6/1/
关于javascript - 如何在html，javascript中的一个范围输入中使用不同的步骤属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36813204/