inputRangeObject.maxプロパティ

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

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

構文

取得

var $max = $inputElementReference.max;

戻り値

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

設定

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

サンプル

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

レンジ入力欄の値:50

レンジ入力欄:

サンプルの動作について

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

サンプルのソースコード

JavaScript

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