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