HTML DOM इनपुट रेंज वैल्यू प्रॉपर्टी टाइप ="रेंज" और वैल्यू एट्रिब्यूट वाले इनपुट एलिमेंट से जुड़ी है। इसका उपयोग स्लाइडर नियंत्रण मान विशेषता के मान को वापस करने या इसे सेट करने के लिए किया जाता है। मान विशेषता डिफ़ॉल्ट मान या स्लाइडर को खींचकर सेट किया गया मान हो सकता है।
सिंटैक्स
−
. के लिए वाक्य रचना निम्नलिखित हैवैल्यू प्रॉपर्टी सेट करना -
rangeObject.value = text;
यहां, रेंज स्लाइडर नियंत्रण के लिए मान निर्दिष्ट करने के लिए टेक्स्ट का उपयोग किया जाता है।
उदाहरण
आइए इनपुट रेंज वैल्यू प्रॉपर्टी के लिए एक उदाहरण देखें -
<!DOCTYPE html>
<html>
<body>
<h1>Input range Value property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>Get the above element value by clicking the below button</p>
<button onclick="getValue()">Get Value</button>
<p id="Sample"></p>
<script>
function getValue() {
var t = document.getElementById("RANGE1").value;
document.getElementById("Sample").innerHTML = "The value for the radio button is : "+t;
}
</script>
</body>
</html> आउटपुट
यह निम्नलिखित आउटपुट देगा -
"मूल्य प्राप्त करें" बटन पर क्लिक करने पर -
उपरोक्त उदाहरण में -
हमने टाइप ="रेंज", आईडी ="रेंज 1", नाम ="वीओएल" वाले फॉर्म के अंदर एक इनपुट फ़ील्ड बनाया है -
<form> VOLUME <input type="range" id="RANGE1" name="VOL"> <form>
हमने तब एक बटन "गेट वैल्यू" बनाया है जो उपयोगकर्ता द्वारा क्लिक किए जाने पर getValue () विधि को निष्पादित करेगा -
<button type="button" onclick="getValue()">Get Value</button>
getValue () विधि getElementById () विधि का उपयोग करके इनपुट तत्व प्राप्त करती है और चर t को अपना "मान" विशेषता मान निर्दिष्ट करती है। इसके बाद इस चर को इसकी आंतरिक HTML संपत्ति का उपयोग करके "नमूना" आईडी के साथ पैराग्राफ में प्रदर्शित किया जाता है -
function getValue() {
var t = document.getElementById(“RANGE1").value;
document.getElementById("Sample").innerHTML = "The value for the input field is : "+t;
}