inputRangeObject.minプロパティ

inputRangeObject.minは、レンジ入力欄(type属性がrangeであるinput要素)のmin属性の値を取得、もしくは、設定するプロパティ。

min属性には、レンジ入力欄(type属性がrangeであるinput要素)に入力可能な最小の数値を指定できる。

構文

取得

var $min = $inputElementReference.min;

戻り値

レンジ入力欄(type属性がrangeであるinput要素)に入力可能な最小の数値。

設定

$inputElementReference.min = 最小数値;
最小数値
レンジ入力欄に入力可能な最小の数値を指定する。
初期設定値は「0」。

サンプル

レンジ入力欄に入力可能な最小の数値:0

レンジ入力欄の値:50

レンジ入力欄:

サンプルの動作について

  • 「-100」ボタンをクリックすると、レンジ入力欄に入力可能な最小の数値を「-100」にする。「レンジ入力欄に入力可能な最小の数値:」の右横に「-100」と表示する。
  • 「-50」ボタンをクリックすると、レンジ入力欄に入力可能な最小の数値を「-50」にする。「レンジ入力欄に入力可能な最小の数値:」の右横に「-50」と表示する。
  • 「-25」ボタンをクリックすると、レンジ入力欄に入力可能な最小の数値を「-25」にする。「レンジ入力欄に入力可能な最小の数値:」の右横に「-25」と表示する。
  • 「0」ボタンをクリックすると、レンジ入力欄に入力可能な最小の数値を「0」にする。「レンジ入力欄に入力可能な最小の数値:」の右横に「0」と表示する。
  • 「25」ボタンをクリックすると、レンジ入力欄に入力可能な最小の数値を「25」にする。「レンジ入力欄に入力可能な最小の数値:」の右横に「25」と表示する。
  • 「50」ボタンをクリックすると、レンジ入力欄に入力可能な最小の数値を「50」にする。「レンジ入力欄に入力可能な最小の数値:」の右横に「50」と表示する。
  • レンジ入力欄のスライダーを移動するとレンジ入力欄の数値を変更し、「レンジ入力欄の値:」の右横に現在の数値を表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setMin( $min ) {
    var $elementReference = document.getElementById( "sample" );
    $elementReference.min = $min;
    var $min = $elementReference.min;
    document.getElementById( "sampleOutputMin" ).innerHTML = $min;
    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="setMin(-100);">-100</button>
    <button onclick="setMin(-50);">-50</button>
    <button onclick="setMin(-25);">-25</button>
    <button onclick="setMin(0);">0</button>
    <button onclick="setMin(25);">25</button>
    <button onclick="setMin(50);">50</button>
</p>
<p>レンジ入力欄に入力可能な最小の数値:<span id="sampleOutputMin">0</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, リファレンス パーマリンク