HTML DOM ইনপুট রেঞ্জ অবজেক্টটি "রেঞ্জ" টাইপ সহ উপাদানের সাথে যুক্ত। আমরা যথাক্রমে createElement() এবং getElementById() পদ্ধতি ব্যবহার করে টাইপ রেঞ্জ সহ একটি ইনপুট উপাদান তৈরি এবং অ্যাক্সেস করতে পারি।
সম্পত্তি
নিচে ইনপুট রেঞ্জ অবজেক্ট -
এর বৈশিষ্ট্যগুলি রয়েছে৷Sr. No | সম্পত্তি এবং বর্ণনা |
---|---|
1 | স্বয়ংসম্পূর্ণ৷ একটি পরিসর নিয়ন্ত্রণের স্বয়ংসম্পূর্ণ বৈশিষ্ট্য মান সেট বা ফেরত দিতে। |
2 | অটোফোকাস পৃষ্ঠা লোড হলে বা না হলে রেঞ্জ স্লাইডার নিয়ন্ত্রণ স্বয়ংক্রিয়ভাবে ফোকাস পাবে কিনা তা সেট করতে বা ফেরত দিতে |
3 | ডিফল্ট মান রেঞ্জ স্লাইডার নিয়ন্ত্রণ ডিফল্ট মান সেট করতে বা ফেরত দিতে। |
4 | অক্ষম৷ স্লাইডার নিয়ন্ত্রণ নিষ্ক্রিয় করা হয়েছে বা না থাকলে সেট করতে বা ফেরত দিতে। |
5 | ফর্ম স্লাইডার নিয়ন্ত্রণ ধারণকারী ফর্মের রেফারেন্স ফেরত দিতে |
6 | তালিকা স্লাইডার নিয়ন্ত্রণ ধারণকারী ডেটালিস্টে রেফারেন্স ফেরত দিতে |
7 | সর্বোচ্চ স্লাইডার নিয়ন্ত্রণের সর্বোচ্চ বৈশিষ্ট্য মান সেট করতে বা ফেরত দিতে। |
8 | মিনিট স্লাইডার নিয়ন্ত্রণের ন্যূনতম বৈশিষ্ট্যের মান সেট করতে বা ফেরত দিতে। |
9 | নাম স্লাইডার নিয়ন্ত্রণের নাম বৈশিষ্ট্য মান সেট বা ফেরত দিতে। |
10 | ধাপ স্লাইডার কন্ট্রোলের স্টেপ অ্যাট্রিবিউটের মান সেট বা রিটার্ন করতে। |
11 | টাইপ স্লাইডার নিয়ন্ত্রণের জন্য ফর্ম উপাদান টাইপ ফেরত দিতে. |
12 | মান একটি স্লাইডার নিয়ন্ত্রণের মান বৈশিষ্ট্য মান সেট বা ফেরত দিতে. |
পদ্ধতি
পাসওয়ার্ড অবজেক্ট -
এর জন্য নিম্নলিখিত পদ্ধতিSr. No | পদ্ধতি ও বর্ণনা |
---|---|
1 | পদক্ষেপ () একটি প্রদত্ত সংখ্যা দ্বারা স্লাইডার নিয়ন্ত্রণ মান হ্রাস করতে |
2 | stepUp() একটি প্রদত্ত সংখ্যা দ্বারা স্লাইডার নিয়ন্ত্রণ মান বৃদ্ধি. |
উদাহরণ
আসুন ইনপুট রেঞ্জ অবজেক্ট -
-এর একটি উদাহরণ দেখি<!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>
আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
ক্রিয়েট বোতামে ক্লিক করলে -
উপরের উদাহরণে -
আমরা একটি ক্রিয়েট বোতাম তৈরি করেছি যা ব্যবহারকারীর দ্বারা ক্লিক করার সময় rangeCreate() পদ্ধতিটি কার্যকর করবে -
<button onclick="rangeCreate()">CREATE</button>
rangeCreate() পদ্ধতিটি নথি বস্তুর createElement() পদ্ধতি ব্যবহার করে একটি প্যারামিটার হিসাবে "INPUT" পাস করে উপাদান তৈরি করতে। সদ্য তৈরি করা ইনপুট উপাদানটি ভেরিয়েবল R-এ বরাদ্দ করা হয় এবং setAttribute() পদ্ধতি ব্যবহার করে আমরা মান পরিসর সহ একটি টাইপ অ্যাট্রিবিউট তৈরি করি।
মনে রাখবেন, setAttribute() অ্যাট্রিবিউট তৈরি করে এবং তারপর যদি অ্যাট্রিবিউটটি আগে না থাকে তাহলে মান নির্ধারণ করে। অবশেষে ডকুমেন্ট বডিতে appendChild() মেথড ব্যবহার করে আমরা ইনপুট এলিমেন্টকে টাইপ রেঞ্জ সহ বডির চাইল্ড হিসেবে যুক্ত করি -
function createPASS() { var R = document.createElement("INPUT"); R.setAttribute("type", "range"); document.body.appendChild(R); }