HTML DOM Input Range ऑब्जेक्ट टाइप "range" वाले <input> एलिमेंट से जुड़ा होता है। हम createElement() और getElementById() मेथड का उपयोग करके टाइप range वाले इनपुट एलिमेंट को बना और एक्सेस कर सकते हैं।
प्रॉपर्टीज़
Input range ऑब्जेक्ट के लिए निम्न प्रॉपर्टीज़ हैं:
| क्रमांक | प्रॉपर्टी और विवरण |
|---|---|
| 1 | autocomplete रेंज कंट्रोल के autocomplete एट्रिब्यूट मान को सेट या प्राप्त करने के लिए। |
| 2 | autofocus पेज लोड होने पर रेंज स्लाइडर कंट्रोल को ऑटोमैटिकली फोकस मिलना चाहिए या नहीं, इसे सेट या प्राप्त करने के लिए। |
| 3 | defaultValue रेंज स्लाइडर कंट्रोल के डिफ़ॉल्ट मान को सेट या प्राप्त करने के लिए। |
| 4 | disabled स्लाइडर कंट्रोल डिसेबल है या नहीं, इसे सेट या प्राप्त करने के लिए। |
| 5 | form स्लाइडर कंट्रोल वाले फॉर्म का रेफरेंस प्राप्त करने के लिए। |
| 6 | List स्लाइडर कंट्रोल वाले datalist का रेफरेंस प्राप्त करने के लिए। |
| 7 | Max स्लाइडर कंट्रोल के max एट्रिब्यूट मान को सेट या प्राप्त करने के लिए। |
| 8 | Min स्लाइडर कंट्रोल के min एट्रिब्यूट मान को सेट या प्राप्त करने के लिए। |
| 9 | Name स्लाइडर कंट्रोल के name एट्रिब्यूट मान को सेट या प्राप्त करने के लिए। |
| 10 | Step स्लाइडर कंट्रोल के step एट्रिब्यूट मान को सेट या प्राप्त करने के लिए। |
| 11 | Type स्लाइडर कंट्रोल के लिए फॉर्म एलिमेंट टाइप प्राप्त करने के लिए। |
| 12 | value स्लाइडर कंट्रोल के value एट्रिब्यूट मान को सेट या प्राप्त करने के लिए। |
मेथड्स
पासवर्ड ऑब्जेक्ट के लिए निम्न मेथड हैं:
| क्रमांक | मेथड और विवरण |
|---|---|
| 1 | stepDown() स्लाइडर कंट्रोल के मान को दी गई संख्या से घटाने के लिए। |
| 2 | stepUp() स्लाइडर कंट्रोल के मान को दी गई संख्या से बढ़ाने के लिए। |
उदाहरण
Input Range ऑब्जेक्ट का एक उदाहरण:
<!DOCTYPE html> <html> <head> <script> function rangeCreate() { var R = document.createElement("INPUT"); R.setAttribute("type", "range"); document.body.appendChild(R); } </script> </head> <body> <h1>Input range ऑब्जेक्ट</h1> <p>नीचे दिए गए बटन पर क्लिक करके टाइप range वाला इनपुट फील्ड बनाएं</p> <button onclick="rangeCreate()">बनाएं</button> <br><br> VOLUME: </body> </html>
आउटपुट
उपरोक्त कोड से निम्न आउटपुट प्राप्त होगा:
"बनाएं" बटन पर क्लिक करने पर:
उपरोक्त उदाहरण में:
हमने एक बटन CREATE बनाया जो यूज़र द्वारा क्लिक किए जाने पर rangeCreate() मेथड को एक्जीक्यूट करेगा:
<button onclick="rangeCreate()">CREATE</button>
rangeCreate() मेथड डॉक्यूमेंट ऑब्जेक्ट के createElement() मेथड का उपयोग करके "INPUT" को पैरामीटर के रूप में पास करके <input> एलिमेंट बनाता है। नया बना इनपुट एलिमेंट वेरिएबल R को असाइन किया जाता है और setAttribute() मेथड का उपयोग करके हम टाइप एट्रिब्यूट को मान range के साथ बनाते हैं। याद रखें, setAttribute() एट्रिब्यूट बनाता है और फिर यदि एट्रिब्यूट पहले से मौजूद नहीं है तो मान असाइन करता है। अंत में, डॉक्यूमेंट बॉडी पर appendChild() मेथड का उपयोग करके हम टाइप range वाले इनपुट एलिमेंट को बॉडी के चाइल्ड के रूप में जोड़ते हैं:
function createPASS() { var R = document.createElement("INPUT"); R.setAttribute("type", "range"); document.body.appendChild(R); }
