cod*_*key 5 html javascript input range d3.js
我尝试使用我的年份滑块的输入范围。
<input id="slider" min="1965" max="2012" step="10" value="1965" type="range">
Run Code Online (Sandbox Code Playgroud)
但我的年份列表是1965、1975、1985、1995、2005、2010、2011、2012。我需要在此滑块中使用不同的步骤。一开始我想用10,一次改成5,然后改成1。我的javascript是:
d3.select("#slider").on("change", function(){
$("#sliderValue").append(this.value);
});
Run Code Online (Sandbox Code Playgroud)
先感谢您
我为你的问题准备了一个小解决方案。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>
Run Code Online (Sandbox Code Playgroud)
演示: https: //jsfiddle.net/logual/7uLftnc6/1/