Materialize CSS একটি শক্তিশালী ফ্রেমওয়ার্ক যা Material Design এর নীতির উপর ভিত্তি করে বিভিন্ন ধরনের UI উপাদান প্রদান করে, যার মধ্যে range sliders এবং switches অন্যতম। এই উপাদানগুলো আপনার ওয়েবসাইটের ইন্টারফেসে ইন্টারঅ্যাকটিভ ফিচার যোগ করতে সাহায্য করে। নিচে আমরা range slider এবং switches তৈরি করার পদ্ধতি জানব।
Range Slider তৈরি করা
Range Slider এমন একটি ইনপুট এলিমেন্ট যা ব্যবহারকারীকে একটি নির্দিষ্ট পরিসরের মধ্যে মান নির্বাচন করার সুযোগ দেয়। এটি সাধারণত input type="range" হিসেবে ব্যবহৃত হয়। Materialize CSS এর সাহায্যে আপনি এটি আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তুলতে পারেন।
Range Slider এর HTML কোড
<div class="input-field">
<input type="range" id="test5" min="0" max="100" value="50" />
<label for="test5">Range Slider</label>
</div>
এখানে:
- type="range": এটি ইনপুট ট্যাগের মাধ্যমে স্লাইডার তৈরি করবে।
- min: স্লাইডারের সর্বনিম্ন মান (এখানে 0)।
- max: স্লাইডারের সর্বোচ্চ মান (এখানে 100)।
- value: ডিফল্ট মান, যেটি স্লাইডারের বর্তমান অবস্থান নির্ধারণ করে।
Range Slider স্টাইলিং
Materialize CSS এর মাধ্যমে স্লাইডারকে আরো সুন্দর এবং Material Design এর মতো দেখতে তৈরি করতে, আপনি range slider এ class যোগ করতে পারেন।
<div class="input-field">
<input type="range" id="test5" min="0" max="100" value="50" class="slider" />
<label for="test5">Range Slider</label>
</div>
এখানে, slider ক্লাসটি স্লাইডারকে Materialize স্টাইলের সঙ্গে উপস্থাপন করবে।
Range Slider JavaScript (Optional)
Materialize CSS এ slider এর সাথে স্লাইডার মানের পরিবর্তন ট্র্যাক করতে JavaScript ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, স্লাইডার মান পরিবর্তন হলে তা দেখতে চাইলে:
<script>
var slider = document.getElementById('test5');
var output = document.getElementById('rangeOutput');
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
<p>Value: <span id="rangeOutput">50</span></p>
এখানে, স্লাইডারের মান output এ প্রদর্শিত হবে।
Switches তৈরি করা
Switch একটি UI উপাদান যা সাধারণত দুটি অবস্থার মধ্যে (যেমন, অন বা অফ) সুইচ করার জন্য ব্যবহৃত হয়। Materialize CSS এ সুইচ তৈরি করা খুবই সহজ এবং আকর্ষণীয়।
Switch এর HTML কোড
<div class="switch">
<label>
Off
<input type="checkbox">
<span class="lever"></span>
On
</label>
</div>
এখানে:
- input type="checkbox": এটি সাধারণ চেকবক্স ইনপুট তৈরি করে।
- span class="lever": Materialize CSS এর সুইচের লিভার প্রভাব তৈরি করতে ব্যবহৃত হয়।
- Off এবং On: সুইচের দুইটি অবস্থান, যা ব্যবহারকারীকে অবস্থান পরিবর্তন করতে দেয়।
Switch এর স্টাইলিং
Materialize CSS এর switch ক্লাস স্বয়ংক্রিয়ভাবে সুইচকে সঠিকভাবে স্টাইল করে। সুইচটি স্বাভাবিকভাবে মোবাইল বা ডেস্কটপ স্ক্রীনে মসৃণভাবে চলতে থাকে এবং একটি "লিভার" প্রভাবের সাথে আসে, যা একটি আকর্ষণীয় ইন্টারফেস তৈরি করে।
Switch এর JavaScript (Optional)
আপনি যদি চান, তাহলে সুইচের মান পরিবর্তন হলে কোনো কাজ সম্পন্ন করতে JavaScript ব্যবহার করতে পারেন। যেমন:
<script>
var switchElement = document.querySelector('.switch input');
switchElement.addEventListener('change', function() {
if(this.checked) {
alert("Switch is ON");
} else {
alert("Switch is OFF");
}
});
</script>
এখানে, সুইচটি অন বা অফ হলে alert প্রদর্শিত হবে।
উপসংহার
Materialize CSS এর মাধ্যমে range slider এবং switch তৈরি করা খুবই সহজ এবং আকর্ষণীয়। Range slider ব্যবহারকারীদের একটি নির্দিষ্ট পরিসরের মধ্যে মান নির্বাচন করতে সহায়তা করে, এবং switch দুটি অবস্থার মধ্যে (অন বা অফ) সুইচ করার জন্য একটি সুবিধাজনক উপায় প্রদান করে। Materialize CSS এর স্টাইল এবং ইন্টারঅ্যাকটিভ ফিচারগুলির মাধ্যমে আপনি এই উপাদানগুলোকে আরও সুন্দর ও কার্যকরী করতে পারবেন, যা আপনার ওয়েবসাইটের ব্যবহারকারীদের অভিজ্ঞতাকে আরও উন্নত করবে।
Read more
