HTML DOM इनपुट रेंज ऑब्जेक्ट "रेंज" प्रकार के साथ <इनपुट> तत्व से जुड़ा है। हम क्रमशः createElement () और getElementById () विधि का उपयोग करके टाइप रेंज के साथ एक इनपुट तत्व बना और एक्सेस कर सकते हैं।
गुण
इनपुट रेंज ऑब्जेक्ट के लिए निम्नलिखित गुण हैं -
| Sr.No | संपत्ति और विवरण |
|---|---|
| 1 | स्वतः पूर्ण श्रेणी नियंत्रण के स्वत:पूर्ण विशेषता मान को सेट या वापस करने के लिए। |
| 2 | ऑटोफोकस पृष्ठ लोड होने या न होने पर रेंज स्लाइडर नियंत्रण को स्वचालित रूप से फोकस करना चाहिए या नहीं, इसे सेट करने या वापस करने के लिए |
| 3 | डिफ़ॉल्ट मान श्रेणी स्लाइडर नियंत्रण डिफ़ॉल्ट मान सेट या वापस करने के लिए। |
| 4 | अक्षम स्लाइडर नियंत्रण अक्षम किया गया है या नहीं, इसे सेट करने या वापस करने के लिए। |
| 5 | फ़ॉर्म स्लाइडर नियंत्रण वाले प्रपत्र का संदर्भ वापस करने के लिए |
| 6 | सूची स्लाइडर नियंत्रण वाले डेटालिस्ट के संदर्भ को वापस करने के लिए |
| 7 | अधिकतम स्लाइडर नियंत्रण का अधिकतम विशेषता मान सेट या वापस करने के लिए। |
| 8 | न्यूनतम स्लाइडर नियंत्रण के न्यूनतम विशेषता मान को सेट या वापस करने के लिए। |
| 9 | नाम स्लाइडर नियंत्रण के नाम विशेषता मान को सेट या वापस करने के लिए। |
| 10 | कदम स्लाइडर नियंत्रण के चरण विशेषता का मान सेट या वापस करने के लिए। |
| 11 | प्रकार स्लाइडर नियंत्रण के लिए प्रपत्र तत्व प्रकार वापस करने के लिए। |
| 12 | मान स्लाइडर नियंत्रण के मान विशेषता मान को सेट या वापस करने के लिए। |
तरीके
पासवर्ड ऑब्जेक्ट के लिए निम्नलिखित विधि है -
| Sr.No | <वें शैली ="चौड़ाई:90.5989%; पाठ-संरेखण:केंद्र;">विधि और विवरण|
|---|---|
| 1 | स्टेपडाउन () स्लाइडर नियंत्रण मान को किसी दिए गए नंबर से घटाने के लिए |
| 2 | स्टेपअप() किसी दिए गए नंबर से स्लाइडर नियंत्रण मान को बढ़ाने के लिए। |
उदाहरण
आइए इनपुट रेंज ऑब्जेक्ट के लिए एक उदाहरण देखें -
<!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 object</h1>
<p>Create an input field with type range by clicking the below button</p>
<button onclick="rangeCreate()">CREATE</button>
<br><br>
VOLUME:
</body>
</html> आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा -
क्रिएट बटन पर क्लिक करने पर -
उपरोक्त उदाहरण में -
हमने एक बटन बनाया है जो उपयोगकर्ता द्वारा क्लिक किए जाने पर रेंजक्रिएट () विधि को निष्पादित करेगा -
<button onclick="rangeCreate()">CREATE</button>
रेंजक्रिएट () विधि पैरामीटर के रूप में "इनपुट" पास करके <इनपुट> तत्व बनाने के लिए दस्तावेज़ ऑब्जेक्ट की createElement() विधि का उपयोग करती है। नव निर्मित इनपुट तत्व को वेरिएबल R को सौंपा गया है और setAttribute() विधि का उपयोग करके हम मान श्रेणी के साथ एक प्रकार की विशेषता बनाते हैं।
याद रखें, setAttribute () विशेषता बनाता है और फिर मान निर्दिष्ट करता है यदि विशेषता पहले से मौजूद नहीं है। अंत में दस्तावेज़ बॉडी पर एपेंडचाइल्ड () विधि का उपयोग करके हम इनपुट तत्व को टाइप रेंज के साथ बॉडी के बच्चे के रूप में जोड़ते हैं -
function createPASS() {
var R = document.createElement("INPUT");
R.setAttribute("type", "range");
document.body.appendChild(R);
}