Material Design Lite (MDL) একটি সহজ, লাইটওয়েট ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি। MDL এর Slider Component ব্যবহারকারীদের একটি স্লাইডারে ভ্যালু নির্বাচন করতে সহায়তা করে। এটি সাধারণত প্রোগ্রেস বার, ভলিউম কন্ট্রোল, বা স্কেলযোগ্য কন্টেন্টের জন্য ব্যবহৃত হয়। এই টিউটোরিয়ালে, আমরা দেখব কিভাবে MDL এর Slider Component ব্যবহার করা যায় এবং কাস্টমাইজ করা যায়।
MDL Slider Component কী?
MDL এর Slider Component একটি ইনপুট ফিল্ড যা ব্যবহারকারীদের একটি নির্দিষ্ট ভ্যালু নির্বাচন করতে দেয়। এটি সাধারণত স্লাইডার আকারে উপস্থাপন করা হয়, যেখানে ব্যবহারকারী একটি স্কেল বা প্রোগ্রেসবারের মাধ্যমে একটি মান নির্বাচন করতে পারেন।
MDL Slider Component প্রধানত mdl-slider ক্লাস ব্যবহার করে তৈরি করা হয়।
MDL Slider Component এর সাধারণ কাঠামো
<input type="range" id="slider" class="mdl-slider mdl-js-slider" min="0" max="100" value="50" step="1">
ব্যাখ্যা:
- type="range": এটি স্লাইডার ইনপুট টাইপ।
- mdl-slider: MDL এর স্লাইডার ক্লাস।
- mdl-js-slider: MDL এর স্লাইডার ফাংশনালিটি অ্যাক্টিভ করতে ব্যবহৃত ক্লাস।
- min, max: স্লাইডারের সর্বনিম্ন এবং সর্বোচ্চ মান নির্ধারণ করে।
- value: স্লাইডারের প্রাথমিক মান সেট করে।
- step: স্লাইডারের মান কতটুকু বাড়বে বা কমবে তা নির্ধারণ করে।
MDL Slider Component কাস্টমাইজ করা
MDL এর Slider Component কাস্টমাইজ করা খুব সহজ। আপনি CSS এবং MDL এর ক্লাস ব্যবহার করে এর আকার, রঙ, এবং অন্যান্য বৈশিষ্ট্য পরিবর্তন করতে পারেন।
১. Slider এর আকার কাস্টমাইজ করা
.mdl-slider {
width: 80%; /* স্লাইডারের প্রস্থ বাড়ানো */
margin: 20px; /* স্লাইডারের চারপাশে মার্জিন যোগ করা */
}
এটি স্লাইডারের প্রস্থ এবং মার্জিন কাস্টমাইজ করবে, যার ফলে এটি বড় বা ছোট হতে পারে এবং চারপাশে জায়গা বাড়ানো যাবে।
২. Slider এর রঙ কাস্টমাইজ করা
.mdl-slider {
background: #f0f0f0; /* স্লাইডারের পেছনের রঙ পরিবর্তন */
}
.mdl-slider .mdl-slider__thumb {
background: #4CAF50; /* স্লাইডারের থাম্ব বা হ্যান্ডেল এর রঙ */
}
এটি স্লাইডারের পেছনের রঙ এবং থাম্ব (হ্যান্ডেল) এর রঙ কাস্টমাইজ করবে।
৩. Slider এর স্লাইডিং রেঞ্জ পরিবর্তন
.mdl-slider {
height: 8px; /* স্লাইডারের উচ্চতা পরিবর্তন */
}
.mdl-slider .mdl-slider__thumb {
width: 20px;
height: 20px;
}
এটি স্লাইডারের উচ্চতা এবং থাম্ব (হ্যান্ডেল) এর আকার পরিবর্তন করবে।
MDL Slider এর ব্যবহারকারী অভিজ্ঞতা উন্নত করা
MDL Slider ব্যবহারকারীর অভিজ্ঞতা আরও উন্নত করতে কিছু অতিরিক্ত বৈশিষ্ট্য যোগ করা যেতে পারে।
১. Slider এর ভ্যালু প্রদর্শন
একটি স্লাইডারের ভ্যালু প্রদর্শন করার জন্য, আপনি JavaScript ব্যবহার করতে পারেন, যাতে ব্যবহারকারী স্লাইডারটি সরানোর সময় ভ্যালু রিয়েল-টাইমে দেখানো যায়।
উদাহরণ: Slider Value Display
<input type="range" id="slider" class="mdl-slider mdl-js-slider" min="0" max="100" value="50" step="1">
<span id="slider-value">50</span>
<script>
var slider = document.getElementById('slider');
var output = document.getElementById('slider-value');
output.innerHTML = slider.value; // Display the default slider value
slider.oninput = function() {
output.innerHTML = this.value; // Display the slider value as it changes
}
</script>
এখানে, স্লাইডারের ভ্যালু span এলিমেন্টে প্রদর্শিত হবে। যখন ব্যবহারকারী স্লাইডার সরাবে, তখন তা রিয়েল-টাইমে আপডেট হবে।
২. Slider Value Styling
#slider-value {
font-size: 18px;
font-weight: bold;
color: #4CAF50; /* ভ্যালু টেক্সটের জন্য গা green ় রঙ */
margin-left: 10px;
}
এটি স্লাইডারের ভ্যালু টেক্সটের স্টাইল কাস্টমাইজ করবে, যেমন ফন্ট সাইজ, ফন্ট ওয়েট, এবং রঙ।
MDL Slider ব্যবহার করে প্রগ্রেস বার তৈরি
MDL এর Slider কম্পোনেন্ট ব্যবহার করে আপনি একটি progress bar তৈরি করতে পারেন, যা ব্যবহারকারীর স্লাইডিং এর অগ্রগতি প্রদর্শন করে।
উদাহরণ: Slider সহ Progress Bar
<input type="range" id="progress-slider" class="mdl-slider mdl-js-slider" min="0" max="100" value="50" step="1">
<div class="mdl-progress mdl-js-progress" id="progress-bar"></div>
<script>
var progressSlider = document.getElementById('progress-slider');
var progressBar = document.getElementById('progress-bar');
progressSlider.oninput = function() {
progressBar.value = this.value; // Update progress bar with slider value
}
</script>
এটি একটি স্লাইডার তৈরি করবে যা প্রগ্রেস বারকে নিয়ন্ত্রণ করবে। স্লাইডারটি সরানোর সাথে সাথে প্রগ্রেস বারটি আপডেট হবে।
MDL Slider Component এর সুবিধা
- রেসপন্সিভ ডিজাইন: MDL এর স্লাইডার কম্পোনেন্ট রেসপন্সিভ, তাই এটি বিভিন্ন স্ক্রীনে সঠিকভাবে প্রদর্শিত হবে।
- সহজ কাস্টমাইজেশন: MDL এর স্লাইডার স্টাইল এবং ফাংশনালিটি সহজেই কাস্টমাইজ করা যায় CSS এবং JavaScript দিয়ে।
- ব্যবহারকারী-বান্ধব: স্লাইডার ব্যবহারকারীকে সহজেই একটি মান নির্বাচন করতে দেয় এবং এটি অত্যন্ত ইন্টারঅ্যাকটিভ।
- প্রগ্রেস বার তৈরি করা: স্লাইডার ব্যবহার করে প্রগ্রেস বার তৈরি করা যেতে পারে, যা ওয়েব পেজের বিভিন্ন কার্যক্রমের অগ্রগতি প্রদর্শন করে।
সারাংশ
Material Design Lite (MDL) এর Slider Component ব্যবহার করে আপনি ওয়েব পেজে স্লাইডার তৈরি করতে পারেন, যা ব্যবহারকারীকে একটি নির্দিষ্ট মান নির্বাচন করতে সহায়তা করে। MDL স্লাইডার কাস্টমাইজেশন খুব সহজ এবং আপনি CSS ব্যবহার করে স্লাইডারের আকার, রঙ এবং অন্যান্য বৈশিষ্ট্য পরিবর্তন করতে পারেন। আপনি JavaScript ব্যবহার করে স্লাইডারের মান রিয়েল-টাইমে প্রদর্শনও করতে পারেন। MDL স্লাইডার কম্পোনেন্ট অত্যন্ত ইন্টারঅ্যাকটিভ এবং ব্যবহারে সহজ, যা আপনার ওয়েব পেজের ইউজার এক্সপেরিয়েন্সকে আরও উন্নত করে।
Read more
