inputRangeObject.valueは、レンジ入力欄（type属性がrangeであるinput要素）の値を取得、もしくは、設定するプロパティ。
レンジ入力欄（type属性がrangeであるinput要素）は、指定範囲内の数値を選択する入力欄なので、値は指定範囲内の何れかの数値となる。
構文
取得
var $value = $inputElementReference.value;
戻り値
レンジ入力欄（type属性がrangeであるinput要素）の数値。
設定
$inputElementReference.value = "inputElementValue";
- inputElementValue
- min属性とmax属性で指定した範囲内の数値を指定する。
サンプル
レンジ入力欄の値：50
レンジ入力欄：
サンプルの動作について
- 「0」ボタンをクリックすると、レンジ入力欄の値を「0」にする。「レンジ入力欄の値：」の右横に「0」と表示する。
- 「25」ボタンをクリックすると、レンジ入力欄の値を「25」にする。「レンジ入力欄の値：」の右横に「25」と表示する。
- 「50」ボタンをクリックすると、レンジ入力欄の値を「50」にする。「レンジ入力欄の値：」の右横に「50」と表示する。
- 「75」ボタンをクリックすると、レンジ入力欄の値を「75」にする。「レンジ入力欄の値：」の右横に「75」と表示する。
- 「100」ボタンをクリックすると、レンジ入力欄の値を「100」にする。「レンジ入力欄の値：」の右横に「100」と表示する。
- レンジ入力欄のスライダーを移動するとレンジ入力欄の数値を変更し、「レンジ入力欄の値：」の右横に現在の数値を表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setValue( $value ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.value = $value;
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 setValue( $value ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.value = $value;
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="setValue(0);">0</button>
<button onclick="setValue(25);">25</button>
<button onclick="setValue(50);">50</button>
<button onclick="setValue(75);">75</button>
<button onclick="setValue(100);">100</button>
</p>
<p>レンジ入力欄の値：<span id="sampleOutput">50</span></p>
<p>レンジ入力欄：<input type="range" value="50" id="sample" onmousemove="getValue()" onchange="getValue()"></p>
<button onclick="setValue(0);">0</button>
<button onclick="setValue(25);">25</button>
<button onclick="setValue(50);">50</button>
<button onclick="setValue(75);">75</button>
<button onclick="setValue(100);">100</button>
</p>
<p>レンジ入力欄の値：<span id="sampleOutput">50</span></p>
<p>レンジ入力欄：<input type="range" value="50" id="sample" onmousemove="getValue()" onchange="getValue()"></p>