jQueryUI Slider উইজেট ব্যবহারকারীদের একটি নির্দিষ্ট পরিসীমার মধ্যে মান নির্বাচন করতে সহায়তা করে। এটি একটি স্লাইডার বার তৈরি করে, যা ব্যবহারকারীকে সহজে স্কেল বা পরিমাণ নির্ধারণ করার সুযোগ দেয়। স্লাইডার সাধারণত মান নির্বাচন করার জন্য ব্যবহৃত হয় যেমন ভলিউম কন্ট্রোল, প্রগ্রেসবার, বা কোনও পরিমাণের মান নির্ধারণে।
স্লাইডার তৈরি করার পদক্ষেপ
১. HTML এবং jQueryUI লোড করা
প্রথমে, jQuery এবং jQueryUI এর সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলো আপনার HTML পেজে লোড করুন। উদাহরণস্বরূপ:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQueryUI Slider Example</title>
<!-- jQuery লোড -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- jQueryUI CSS লোড -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<!-- jQueryUI JS লোড -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
<!-- স্লাইডার -->
<div id="slider"></div>
<p>Value: <span id="value">50</span></p>
<script>
$(document).ready(function() {
// স্লাইডার তৈরি করা
$("#slider").slider({
value: 50, // ডিফল্ট মান
min: 0, // ন্যূনতম মান
max: 100, // সর্বোচ্চ মান
slide: function(event, ui) {
$("#value").text(ui.value); // স্লাইডারের মান আপডেট করা
}
});
});
</script>
</body>
</html>
২. স্লাইডার এর কাস্টমাইজেশন
jQueryUI স্লাইডার উইজেট ব্যবহার করে আপনি বিভিন্ন কাস্টমাইজেশন অপশন যোগ করতে পারেন। কিছু সাধারণ কাস্টমাইজেশন হলো:
- min: স্লাইডারের ন্যূনতম মান।
- max: স্লাইডারের সর্বোচ্চ মান।
- value: স্লাইডারের ডিফল্ট মান।
- step: স্লাইডারের মানের increment বা step ডিফাইন করা।
- orientation: স্লাইডারের অরিয়েন্টেশন (অনুভূমিক বা উল্লম্ব)।
কাস্টম উদাহরণ:
<div id="slider"></div>
<p>Value: <span id="value">50</span></p>
<script>
$(document).ready(function() {
$("#slider").slider({
value: 50,
min: 0,
max: 100,
step: 5, // প্রতি স্লাইডে 5 ইউনিট পরিবর্তন হবে
orientation: "horizontal", // স্লাইডার অনুভূমিক অবস্থানে থাকবে
slide: function(event, ui) {
$("#value").text(ui.value); // স্লাইডারের মান প্রদর্শন করা
}
});
});
</script>
৩. স্লাইডার এর স্টাইলিং
আপনি CSS ব্যবহার করে স্লাইডারের স্টাইলও কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ:
<style>
#slider {
width: 300px; /* স্লাইডারের প্রস্থ */
margin: 20px 0; /* মার্জিন */
}
#value {
font-size: 18px; /* মানের আকার */
font-weight: bold; /* মানের বোল্ড ফন্ট */
}
</style>
৪. একাধিক স্লাইডার তৈরি করা
আপনি একাধিক স্লাইডারও তৈরি করতে পারেন এবং তাদের প্রতিটির জন্য আলাদা কাস্টমাইজেশন করতে পারেন। উদাহরণস্বরূপ:
<div id="slider1"></div>
<p>Slider 1 Value: <span id="value1">50</span></p>
<div id="slider2"></div>
<p>Slider 2 Value: <span id="value2">30</span></p>
<script>
$(document).ready(function() {
$("#slider1").slider({
value: 50,
min: 0,
max: 100,
slide: function(event, ui) {
$("#value1").text(ui.value);
}
});
$("#slider2").slider({
value: 30,
min: 0,
max: 100,
slide: function(event, ui) {
$("#value2").text(ui.value);
}
});
});
</script>
৫. স্লাইডারের ইভেন্ট ব্যবহার করা
আপনি স্লাইডার উইজেটের উপর বিভিন্ন ইভেন্ট প্রয়োগ করতে পারেন, যেমন change, start, stop ইত্যাদি। এগুলি আপনাকে আরও নিয়ন্ত্রণ দেয় স্লাইডারের আচরণ নির্ধারণে।
উদাহরণ: স্লাইডার start এবং stop ইভেন্ট ব্যবহার
<div id="slider"></div>
<p>Value: <span id="value">50</span></p>
<script>
$(document).ready(function() {
$("#slider").slider({
value: 50,
min: 0,
max: 100,
start: function(event, ui) {
console.log("Slider started!");
},
stop: function(event, ui) {
console.log("Slider stopped at value: " + ui.value);
},
slide: function(event, ui) {
$("#value").text(ui.value);
}
});
});
</script>
উপসংহার
jQueryUI Slider উইজেট ব্যবহার করে আপনি সহজেই একটি স্লাইডার তৈরি করতে পারেন যা ব্যবহারকারীদের মান নির্বাচন করতে সহায়তা করে। আপনি স্লাইডারের min, max, value, step, এবং orientation কাস্টমাইজেশন অপশন ব্যবহার করে স্লাইডারকে আপনার প্রয়োজন অনুযায়ী কাস্টমাইজ করতে পারেন। CSS দিয়ে স্লাইডারের ডিজাইন আরও আকর্ষণীয় করা যায়, এবং বিভিন্ন ইভেন্ট (যেমন start, stop, slide) ব্যবহার করে স্লাইডারের আচরণ নিয়ন্ত্রণ করা সম্ভব।
Read more
