HTML DOM Input Range step प्रॉपर्टी का उपयोग स्लाइडर कंट्रोल के step एट्रिब्यूट मान को सेट या प्राप्त करने के लिए किया जाता है। यह निर्दिष्ट करता है कि स्लाइडर प्रत्येक मूवमेंट पर कितना मूव करेगा। Max और min एट्रिब्यूट के साथ step प्रॉपर्टी का उपयोग करके, हम कानूनी मानों की एक रेंज परिभाषित कर सकते हैं।
सिंटैक्स
Step प्रॉपर्टी सेट करने के लिए सिंटैक्स:
rangeObject.step=number
यहां, number स्लाइडर कंट्रोल के मूवमेंट आकार को निर्दिष्ट करता है। इसका डिफ़ॉल्ट मान 1 है।
उदाहरण
Input Range step प्रॉपर्टी का एक उदाहरण:
<!DOCTYPE html> <html> <body> <h1>Input range step प्रॉपर्टी</h1> <form> VOLUME <input type="range" id="RANGE1" name="VOL"> </form> <p>नीचे दिए गए बटन पर क्लिक करके ऊपर के रेंज कंट्रोल की step प्रॉपर्टी का मान बदलें</p> <button type="button" onclick="changeStep()">बदलें</button> <p id="Sample"></p> <script> function changeStep() { document.getElementById("RANGE1").step ="30" ; document.getElementById("Sample").innerHTML = "Step एट्रिब्यूट का मान अब 30 है"; } </script> </body> </html>
आउटपुट
उपरोक्त कोड से निम्न आउटपुट प्राप्त होगा:
"बदलें" बटन पर क्लिक करने पर:
उपरोक्त उदाहरण में:
हमने type="range", id="RANGE1", name="VOL" के साथ एक फॉर्म के अंदर एक इनपुट फील्ड बनाया। इसकी step प्रॉपर्टी डिफ़ॉल्ट रूप से 1 पर सेट है:
<form> VOLUME <input type="range" id="RANGE1" name="VOL"> <form>
फिर हमने एक बटन CHANGE बनाया जो यूज़र द्वारा क्लिक किए जाने पर changeStep() मेथड को एक्जीक्यूट करेगा:
<button type="button" onclick="changeStep()">CHANGE</button>
changeStep() मेथड getElementById() मेथड का उपयोग करके id "RANGE1" को पास करके टाइप range वाले इनपुट फील्ड को प्राप्त करता है। एलिमेंट प्राप्त करने के बाद हम इसकी step प्रॉपर्टी को 30 पर सेट करते हैं। यह बढ़ा देगा कि स्लाइडर एक मूवमेंट में कितना मूव करेगा। चूंकि min मान डिफ़ॉल्ट रूप से 0 और max मान 100 है, इसलिए स्लाइडर अब केवल तीन स्थानों पर मूव करेगा:
function changeStep() { document.getElementById("RANGE1").step ="30" ; document.getElementById("Sample").innerHTML = "Step एट्रिब्यूट का मान अब 30 है"; }
