年のスライダの入力範囲を使用しようとしました。html、javascriptの1つの範囲の入力で異なるステップ属性を使用する方法
<input id="slider" min="1965" max="2012" step="10" value="1965" type="range">
しかし、私の年のリストは1965,1975,1985,1995,2005,2010,2011,2012です。私はこのスライダーで異なるステップを使用する必要があります。初めに、私は10を使用し、一回のために5に変更し、1マイJavaScriptに変更することです：
d3.select("#slider").on("change", function(){
$("#sliderValue").append(this.value);
});
は、私はあなたのための小さなソリューションを用意している事前
にありがとう質問。ステップ属性は範囲の現在の値に依存します。
<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/
ありがとうございます。 – codemonkey
こんにちは、私も質問があります、今私たちは2012を持っていると仮定し、ステップは1、右でしょうか？しかし、私は1965年に戻って欲しいと思っています。ステップも1になるので、エラーが発生します。いくつかの解決策がありますか？ – codemonkey
私は2012年と1965年のテストを行いましたが、エラーは発生しません。 2012年にステップ1を設定すると、1965年に戻るとステップは20になります...私は多くの実験を行い、同じ結果を出します...もう一度確認できますか？このフィドルであなたの実験を繰り返してください：https://jsfiddle.net/logual/7uLftnc6/1/ –
。 1965年の1975年の1985年のようなステップは10であり、2010年の2011年の1ステップは1であるか？誤解申し訳ありません – codemonkey