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>
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>
<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>