inputRangeObject.stepは、レンジ入力欄(type属性がrangeであるinput要素)のstep属性の値を取得、もしくは、設定するプロパティ。
step属性には、レンジ入力欄(type属性がrangeであるinput要素)に入力可能な数値の間隔を指定できる。
構文
取得
var $step = $inputElementReference.step;
戻り値
レンジ入力欄(type属性がrangeであるinput要素)に入力可能な数値の間隔。
設定
$inputElementReference.step = 数値の間隔;
- 数値の間隔
- レンジ入力欄に入力可能な数値の間隔を数値で指定する。
- 初期設定値は「1」。
サンプル
レンジ入力欄に入力可能な数値の間隔:1
レンジ入力欄の値:50
レンジ入力欄:
サンプルの動作について
- 「0.25」ボタンをクリックすると、レンジ入力欄に入力可能な数値の間隔を「0.25」にする。「レンジ入力欄に入力可能な数値の間隔:」の右横に「0.25」と表示する。
- 「0.5」ボタンをクリックすると、レンジ入力欄に入力可能な数値の間隔を「0.5」にする。「レンジ入力欄に入力可能な数値の間隔:」の右横に「0.5」と表示する。
- 「1」ボタンをクリックすると、レンジ入力欄に入力可能な数値の間隔を「1」にする。「レンジ入力欄に入力可能な数値の間隔:」の右横に「1」と表示する。
- 「5」ボタンをクリックすると、レンジ入力欄に入力可能な数値の間隔を「5」にする。「レンジ入力欄に入力可能な数値の間隔:」の右横に「5」と表示する。
- 「10」ボタンをクリックすると、レンジ入力欄に入力可能な数値の間隔を「10」にする。「レンジ入力欄に入力可能な数値の間隔:」の右横に「10」と表示する。
- レンジ入力欄のスライダーを移動するとレンジ入力欄の数値を変更し、「レンジ入力欄の値:」の右横に現在の数値を表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setStep( $step ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.step = $step;
var $step = $elementReference.step;
document.getElementById( "sampleOutputStep" ).innerHTML = $step;
var $value = $elementReference.value;
document.getElementById( "sampleOutput" ).innerHTML = $value;
}
function getValue() {
var $elementReference = document.getElementById( "sample" );
var $value = $elementReference.value;
document.getElementById( "sampleOutput" ).innerHTML = $value;
}
</script>
function setStep( $step ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.step = $step;
var $step = $elementReference.step;
document.getElementById( "sampleOutputStep" ).innerHTML = $step;
var $value = $elementReference.value;
document.getElementById( "sampleOutput" ).innerHTML = $value;
}
function getValue() {
var $elementReference = document.getElementById( "sample" );
var $value = $elementReference.value;
document.getElementById( "sampleOutput" ).innerHTML = $value;
}
</script>
HTML
<p>
<button onclick="setStep(0.25);">0.25</button>
<button onclick="setStep(0.5);">0.5</button>
<button onclick="setStep(1);">1</button>
<button onclick="setStep(5);">5</button>
<button onclick="setStep(10);">10</button>
</p>
<p>レンジ入力欄に入力可能な数値の間隔:<span id="sampleOutputStep">1</span></p>
<p>レンジ入力欄の値:<span id="sampleOutput">50</span></p>
<p>レンジ入力欄:<input type="range" value="50" id="sample" onmousemove="getValue()" onchange="getValue()"></p>
<button onclick="setStep(0.25);">0.25</button>
<button onclick="setStep(0.5);">0.5</button>
<button onclick="setStep(1);">1</button>
<button onclick="setStep(5);">5</button>
<button onclick="setStep(10);">10</button>
</p>
<p>レンジ入力欄に入力可能な数値の間隔:<span id="sampleOutputStep">1</span></p>
<p>レンジ入力欄の値:<span id="sampleOutput">50</span></p>
<p>レンジ入力欄:<input type="range" value="50" id="sample" onmousemove="getValue()" onchange="getValue()"></p>