বিবরণ
HTML DOM Input Range step প্রোপার্টি ব্যবহার করা হয় স্লাইডার কন্ট্রোলের step অ্যাট্রিবিউটের মান সেট বা রিটার্ন করার জন্য। এটি নির্দেশ করে যে স্লাইডার প্রতিটি মুভমেন্টে কতটুকু সরবে। max এবং min অ্যাট্রিবিউটের সাথে step প্রোপার্টি ব্যবহার করে আমরা কানুনগত মানের একটি রেঞ্জ সংজ্ঞায়িত করতে পারি।
সিনট্যাক্স
Step প্রোপার্টি সেট করার সিনট্যাক্স:
rangeObject.step=number
এখানে, number নির্দেশ করে স্লাইডার কন্ট্রোলের মুভমেন্টের আকার। এর ডিফল্ট মান ১।
উদাহরণ
Input Range step প্রোপার্টির জন্য একটি উদাহরণ:
<!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>
আউটপুট
এটি নিচের আউটপুট তৈরি করবে:
CHANGE বাটনে ক্লিক করার পর:
উদাহরণের ব্যাখ্যা
- আমরা একটি ইনপুট ফিল্ড তৈরি করেছি একটি ফর্মের ভেতরে যার type="range", id="RANGE1", name="VOL"। এর step প্রোপার্টির মান ডিফল্টভাবে ১ সেট করা আছে।
- তারপর একটি CHANGE বাটন তৈরি করা হয়েছে যা ক্লিক করলে changeStep() মেথড এক্সিকিউট হবে।
- changeStep() মেথড getElementById() ব্যবহার করে type="range" ইনপুট ফিল্ড পায় id "RANGE1" পাস করে। এলিমেন্ট পাওয়ার পর এর step প্রোপার্টি ৩০ সেট করা হয়। এটি প্রতিটি মুভমেন্টে স্লাইডার কতটুকু সরবে তা বাড়িয়ে দেয়। যেহেতু min মান ০ এবং max মান ১০০ ডিফল্টভাবে তাই স্লাইডার এখন শুধু তিনটি পজিশনে সরবে।
