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> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
চেঞ্জ বোতামে ক্লিক করলে -
উপরের উদাহরণে -
আমরা টাইপ=“রেঞ্জ”, id=“RANGE1” ,name=“VOL” সহ ফর্মের ভিতরে একটি ইনপুট ফিল্ড তৈরি করেছি। এর স্টেপ প্রপার্টি মান ডিফল্টরূপে 1 −
সেট করা হয়<form> VOLUME <input type="range" id="RANGE1" name="VOL"> <form>
তারপরে আমরা একটি পরিবর্তন বোতাম তৈরি করেছি যা ব্যবহারকারীর দ্বারা ক্লিক করার পরে changeStep() পদ্ধতিটি কার্যকর করবে -
<button type="button" onclick="changeStep()">CHANGE</button>
changeStep() পদ্ধতিটি getElementById() পদ্ধতি ব্যবহার করে টাইপ রেঞ্জ সহ ইনপুট ক্ষেত্র পেতে এটিতে "RANGE1" আইডি পাস করে। এলিমেন্ট পাওয়ার পর আমরা এর স্টেপ প্রপার্টি 30 এ সেট করি। এটি এক মুভমেন্টে স্লাইডারটি কতটা নড়বে তা বাড়িয়ে দেবে। যেহেতু ন্যূনতম মান হল 0 এবং সর্বোচ্চ মান হল 100 ডিফল্টরূপে তাই স্লাইডারটি এখন মাত্র তিনটি জায়গায় চলে যাবে -
function changeStep() {
document.getElementById("RANGE1").step ="30" ;
document.getElementById("Sample").innerHTML = "The step attribute value is now 30";
} 