inputRangeObject.stepプロパティ

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>

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>

スポンサード リンク

カテゴリー: DOM, input type=range オブジェクト, JavaScript, リファレンス パーマリンク