HTML DOM इनपुट रेंज स्टेप प्रॉपर्टी का इस्तेमाल स्लाइडर कंट्रोल स्टेप एट्रीब्यूट वैल्यू को सेट करने या वापस करने के लिए किया जाता है। यह निर्दिष्ट करता है कि स्लाइडर प्रत्येक आंदोलन पर कितना आगे बढ़ेगा। स्टेप प्रॉपर्टी के साथ अधिकतम और न्यूनतम विशेषता का उपयोग करके, हम कानूनी मूल्यों की एक श्रृंखला को परिभाषित कर सकते हैं।
सिंटैक्स
−
. के लिए वाक्य रचना निम्नलिखित हैस्टेप प्रॉपर्टी सेट करना -
rangeObject.step=number
यहां, संख्या स्लाइडर नियंत्रण आंदोलन आकार निर्दिष्ट करती है। इसके लिए डिफ़ॉल्ट मान 1 है।
उदाहरण
आइए इनपुट रेंज स्टेप प्रॉपर्टी के लिए एक उदाहरण देखें -
<!DOCTYPE html>
<html>
<body>
<h1>Input range step Property</h1>
<form>
VOLUME <input type="range" id="RANGE1" name="VOL">
</form>
<p>Change the step property value of the above range control by clicking the below button</p>
<button type="button" onclick="changeStep()">CHANGE</button>
<p id="Sample"></p>
<script>
function changeStep() {
document.getElementById("RANGE1").step ="30" ;
document.getElementById("Sample").innerHTML = "The step attribute value is now 30";
}
</script>
</body>
</html> आउटपुट
यह निम्नलिखित आउटपुट देगा -
चेंज बटन पर क्लिक करने पर -
उपरोक्त उदाहरण में -
हमने टाइप ="रेंज", आईडी ="रेंज 1", नाम ="वीओएल" वाले फॉर्म के अंदर एक इनपुट फ़ील्ड बनाया है। इसका चरण गुण मान डिफ़ॉल्ट रूप से 1 पर सेट होता है -
<form> VOLUME <input type="range" id="RANGE1" name="VOL"> <form>
हमने तब एक बटन बनाया है जो उपयोगकर्ता द्वारा क्लिक किए जाने पर चेंजस्टेप () विधि को निष्पादित करेगा -
<button type="button" onclick="changeStep()">CHANGE</button>
चेंजस्टेप () विधि getElementById () विधि का उपयोग इनपुट फ़ील्ड को टाइप रेंज के साथ आईडी "RANGE1" पास करके प्राप्त करने के लिए करती है। तत्व प्राप्त करने के बाद हम इसकी चरण संपत्ति को 30 पर सेट करते हैं। इससे स्लाइडर एक आंदोलन में कितना बढ़ जाएगा। चूंकि न्यूनतम मान 0 है और अधिकतम मान डिफ़ॉल्ट रूप से 100 है इसलिए स्लाइडर अब केवल तीन स्थानों पर चलेगा -
function changeStep() {
document.getElementById("RANGE1").step ="30" ;
document.getElementById("Sample").innerHTML = "The step attribute value is now 30";
}