jQueryUI এর স্লাইডার এবং স্পিনার

jQueryUI একটি শক্তিশালী লাইব্রেরি যা বিভিন্ন ধরনের ইন্টারেক্টিভ উপাদান এবং উইজেট সরবরাহ করে। এর মধ্যে দুটি জনপ্রিয় উপাদান হলো স্লাইডার (Slider) এবং স্পিনার (Spinner)। এই দুটি উপাদান ব্যবহারকারীদের জন্য মান নির্বাচন প্রক্রিয়া সহজ এবং আকর্ষণীয় করে তোলে।

এখানে jQueryUI এর স্লাইডার এবং স্পিনার ব্যবহারের উদাহরণ এবং কাস্টমাইজেশন সম্পর্কে আলোচনা করা হলো।

১. jQueryUI স্লাইডার (Slider)

স্লাইডার উইজেট ব্যবহারকারীদের একটি নির্দিষ্ট পরিসীমা থেকে মান নির্বাচন করতে সাহায্য করে। এটি সাধারণত পরিমাণ, মূল্য বা কোনো স্কেলের মান নির্বাচন করার জন্য ব্যবহৃত হয়।

স্লাইডার তৈরি করা

<div id="slider"></div>
<p>মান: <span id="value">50</span></p>

<script>
  $(function() {
    $("#slider").slider({
      value: 50,  // স্লাইডারের প্রাথমিক মান
      min: 0,     // স্লাইডারের সর্বনিম্ন মান
      max: 100,   // স্লাইডারের সর্বোচ্চ মান
      slide: function(event, ui) {
        $("#value").text(ui.value);  // স্লাইডারের মান পরিবর্তন হওয়ার সময় তা প্রদর্শন
      }
    });
  });
</script>

স্লাইডার কাস্টমাইজেশন

• min: স্লাইডারের সর্বনিম্ন মান।
• max: স্লাইডারের সর্বোচ্চ মান।
• value: স্লাইডারের প্রাথমিক মান।
• slide: স্লাইডারের মান পরিবর্তন হওয়ার সাথে সাথে একটি ফাংশন ট্রিগার হয়, যেখানে নতুন মান প্রদর্শিত হয়।

২. jQueryUI স্পিনার (Spinner)

স্পিনার উইজেট ব্যবহারকারীদের একটি নির্দিষ্ট পরিসীমার মধ্যে মান নির্বাচন করতে দেয়, তবে এটি স্লাইডারের মতো গ্রাফিক্যাল ইন্টারফেসের পরিবর্তে ইনপুট ফিল্ডে সংখ্যার মান পরিবর্তন করার জন্য উপযুক্ত। স্পিনার উইজেটটি সাধারণত সংখ্যার মান বাড়ানো বা কমানো যায় এমন বাটন (উপরে বা নিচে) প্রদান করে।

স্পিনার তৈরি করা

<input id="spinner" name="value" value="0" />
<script>
  $(function() {
    $("#spinner").spinner({
      min: 0,  // সর্বনিম্ন মান
      max: 100,  // সর্বোচ্চ মান
      step: 1,  // প্রতিটি ক্লিকের সাথে মান কতটা বাড়বে বা কমবে
      spin: function(event, ui) {
        console.log(ui.value);  // স্পিনিং এর সময় নতুন মান প্রদর্শন
      }
    });
  });
</script>

স্পিনার কাস্টমাইজেশন

• min: স্পিনারের সর্বনিম্ন মান।
• max: স্পিনারের সর্বোচ্চ মান।
• step: একটি স্পিনিং অপারেশনের জন্য মানের পরিবর্তন।
• spin: ব্যবহারকারী যখন স্পিনারের উপরে বা নিচে বাটন ক্লিক করবে, তখন একটি ফাংশন ট্রিগার হবে, যা নতুন মান দেখাবে।

স্লাইডার এবং স্পিনারের মধ্যে পার্থক্য

• স্লাইডার: এটি একটি গ্রাফিক্যাল উপাদান, যেখানে ব্যবহারকারী একটি স্লাইডিং বাটন দ্বারা মান নির্বাচন করতে পারেন।
• স্পিনার: এটি একটি ইনপুট ফিল্ড যেখানে সংখ্যা বৃদ্ধি বা হ্রাস করার জন্য বাটন থাকে। এটি সাধারণত স্লাইডার থেকে কম গ্রাফিক্যাল এবং বেশি নির্দিষ্ট মান পরিবর্তনের জন্য ব্যবহৃত হয়।

৩. স্লাইডার এবং স্পিনার একসাথে ব্যবহার করা

আপনি একই পৃষ্ঠায় স্লাইডার এবং স্পিনার একসাথে ব্যবহার করতে পারেন। উদাহরণস্বরূপ:

<div id="slider"></div>
<input id="spinner" name="value" value="50" />

<script>
  $(function() {
    $("#slider").slider({
      value: 50,
      min: 0,
      max: 100,
      slide: function(event, ui) {
        $("#spinner").val(ui.value);  // স্লাইডারের মান স্পিনারে আপডেট করা
      }
    });
    $("#spinner").spinner({
      min: 0,
      max: 100,
      step: 1,
      spin: function(event, ui) {
        $("#slider").slider("value", ui.value);  // স্পিনারের মান স্লাইডারে আপডেট করা
      }
    });
  });
</script>

এখানে, যখন আপনি স্লাইডারের মান পরিবর্তন করবেন, তখন স্পিনারের মানও পরিবর্তিত হবে এবং এর বিপরীতও সত্য।

উপসংহার

jQueryUI স্লাইডার এবং স্পিনার উইজেট দুটি ইন্টারঅ্যাকটিভ উপাদান যা ব্যবহারকারীদের জন্য মান নির্বাচন প্রক্রিয়াকে সহজ এবং আকর্ষণীয় করে তোলে। স্লাইডার গ্রাফিক্যাল উপাদান ব্যবহার করে মান নির্বাচন করতে সাহায্য করে, যেখানে স্পিনার একটি ইনপুট ফিল্ডের মাধ্যমে মান পরিবর্তন করতে দেয়। এই দুটি উপাদান একসাথে ব্যবহার করে আরও ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস তৈরি করা সম্ভব, যা ওয়েবসাইটের ইউজার এক্সপিরিয়েন্স উন্নত করে।

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) ব্যবহার করে স্লাইডারের আচরণ নিয়ন্ত্রণ করা সম্ভব।

Range Slider হল একটি jQueryUI উইজেট যা ব্যবহারকারীদের একটি নির্দিষ্ট পরিসরের মধ্যে মান সিলেক্ট করতে সহায়তা করে। এটি দুটি স্লাইডার হ্যান্ডেল দিয়ে কাজ করে, যা ব্যবহারকারীকে একটি পরিসরের মিনিমাম ও ম্যাক্সিমাম মান নির্বাচন করতে দেয়। ওয়েব ফর্মে এটি একটি অত্যন্ত কার্যকরী উপাদান, যেমন একটি মূল্য পরিসীমা বা পরিমাণ নির্বাচন করার জন্য ব্যবহৃত হয়।

এখানে আমরা আলোচনা করব কিভাবে jQueryUI এর সাহায্যে একাধিক মানের জন্য একটি Range Slider তৈরি করা যায়।

১. প্রাথমিক সেটআপ

প্রথমে আপনাকে jQuery এবং jQueryUI লাইব্রেরি আপনার HTML ফাইলে অন্তর্ভুক্ত করতে হবে:

<!-- jQuery লোড -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- jQueryUI স্টাইল শীট -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

<!-- jQueryUI স্ক্রিপ্ট -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

২. HTML ফর্ম তৈরি

এখন, HTML ফাইলে একটি ডিভ (div) তৈরি করুন যেখানে স্লাইডার দুটি হ্যান্ডেল সহ প্রদর্শিত হবে:

<label for="range-slider">দামের পরিসীমা নির্বাচন করুন:</label>
<div id="range-slider"></div>

<p>নির্বাচিত পরিসীমা: <span id="range-value"></span></p>

এখানে একটি div রয়েছে যেটিতে স্লাইডার থাকবে, এবং একটি p ট্যাগ রয়েছে যেটিতে ব্যবহারকারী নির্বাচিত পরিসীমা দেখতে পারবে।

৩. jQuery কোড ব্যবহার

এখন, স্লাইডার তৈরি করার জন্য jQuery কোড ব্যবহার করুন। range-slider ID সহ ডিভে রেঞ্জ স্লাইডার যোগ করার জন্য নিচের কোডটি ব্যবহার করুন:

$(document).ready(function() {
  $("#range-slider").slider({
    range: true,               // রেঞ্জ স্লাইডার তৈরি হবে
    min: 0,                    // ন্যূনতম মান
    max: 100,                  // সর্বোচ্চ মান
    values: [20, 80],          // প্রথম ও দ্বিতীয় হ্যান্ডেলের মান
    slide: function(event, ui) {
      // স্লাইডারের মান পরিবর্তন হলে পরিসীমা প্রদর্শন
      $("#range-value").text("নূন্যতম: " + ui.values[0] + ", সর্বোচ্চ: " + ui.values[1]);
    }
  });

  // প্রথমে প্রদর্শিত মান সেট করা
  $("#range-value").text("নূন্যতম: " + $("#range-slider").slider("values", 0) + ", সর্বোচ্চ: " + $("#range-slider").slider("values", 1));
});

৪. কাস্টমাইজেশন

jQueryUI রেঞ্জ স্লাইডার অনেক ধরনের কাস্টমাইজেশন সমর্থন করে। কিছু সাধারণ কাস্টমাইজেশন:

• পরিসীমা পরিবর্তন: আপনি স্লাইডারের পরিসীমা পরিবর্তন করতে পারেন, যেমন ন্যূনতম ও সর্বোচ্চ মান:

  min: 10,   // ন্যূনতম মান ১০
  max: 500,  // সর্বোচ্চ মান ৫০০
  

• মানের কাস্টম ফরম্যাট: আপনি মানের প্রদর্শন কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, সংখ্যা ১০০ এর পরিবর্তে হাজারের ফরম্যাটে প্রদর্শন করতে:

  slide: function(event, ui) {
    $("#range-value").text("নূন্যতম: " + ui.values[0] + "k, সর্বোচ্চ: " + ui.values[1] + "k");
  }
  

• ডিফল্ট মান: আপনি ডিফল্ট মান পরিবর্তন করতে পারেন যাতে স্লাইডারের হ্যান্ডেলগুলি নির্দিষ্ট পরিসীমায় থাকে:

  values: [50, 150]  // প্রথম হ্যান্ডেল ৫০, দ্বিতীয় হ্যান্ডেল ১৫০
  

৫. ব্যবহারকারী ইন্টারফেস

একবার কোড সম্পন্ন হলে, স্লাইডারটি দুইটি হ্যান্ডেল সহ প্রদর্শিত হবে এবং ব্যবহারকারী সহজেই দুটি মান সিলেক্ট করতে পারবেন। মান সিলেক্ট করার সময়, স্লাইডারের নিচে বর্তমান নির্বাচিত পরিসীমা (ন্যূনতম এবং সর্বোচ্চ) প্রদর্শিত হবে।

উপসংহার

jQueryUI Range Slider একটি শক্তিশালী টুল যা ব্যবহারকারীদের একটি নির্দিষ্ট পরিসরের মধ্যে মান নির্বাচন করতে সাহায্য করে। এটি দুইটি স্লাইডার হ্যান্ডেল দিয়ে কাজ করে, যা আপনাকে সঠিক পরিসীমা নির্বাচন করার সুবিধা দেয়। কাস্টমাইজেশন অপশন ব্যবহার করে আপনি রেঞ্জ স্লাইডারটি আপনার প্রয়োজন অনুযায়ী পরিবর্তন করতে পারবেন, যেমন স্লাইডারের পরিসীমা, মানের প্রদর্শন ফরম্যাট, এবং অন্যান্য ইন্টারফেস কাস্টমাইজেশন।

Spinner উইজেট jQueryUI-এর একটি কার্যকরী উপাদান যা ব্যবহারকারীদের সংখ্যা নির্ধারণ করতে সহায়তা করে। এটি একটি ইনপুট ফিল্ডের মধ্যে একটি সংখ্যা প্রদর্শন করে এবং ব্যবহারকারী স্পিনার (উপরে বা নিচে যাওয়ার জন্য দুটি বাটন) ব্যবহার করে সংখ্যাটি বাড়াতে বা কমাতে পারে। এটি সাধারণত ফর্মের জন্য ব্যবহার হয়, যেমন পরিমাণ নির্ধারণ, দাম নির্বাচন ইত্যাদি।

jQueryUI Spinner উইজেট ব্যবহার করার পদক্ষেপ

১. প্রাথমিক সেটআপ

প্রথমে আপনাকে jQuery এবং jQueryUI এর CSS ও JavaScript ফাইলগুলো লোড করতে হবে। উদাহরণস্বরূপ:

<!-- jQuery লোড -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- jQueryUI স্টাইল শীট লোড -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

<!-- jQueryUI স্ক্রিপ্ট লোড -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

২. HTML ফর্ম তৈরি

এখন একটি ইনপুট ফিল্ড তৈরি করুন, যেখানে স্পিনার উইজেট যুক্ত হবে। উদাহরণ:

<label for="spinner">সংখ্যা নির্বাচন করুন:</label>
<input id="spinner" name="value" value="0" />

এখানে একটি ইনপুট ফিল্ড তৈরি করা হয়েছে, যেখানে স্পিনার হবে এবং ডিফল্ট মান হিসেবে 0 থাকবে।

৩. jQuery কোড ব্যবহার

এখন, jQuery কোড ব্যবহার করে আপনি স্পিনার উইজেটটি ইনিশিয়েট করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো:

$(document).ready(function() {
  // স্পিনার উইজেট ইনিশিয়েট করা
  $("#spinner").spinner({
    min: 0,      // ন্যূনতম সংখ্যা
    max: 100,    // সর্বোচ্চ সংখ্যা
    step: 1,     // প্রতিটি স্পিনে মান বৃদ্ধি বা হ্রাস হবে ১
    spin: function(event, ui) {
      // স্পিনার পরিবর্তনের সময় মান প্রদর্শন করা
      console.log("নতুন মান: " + ui.value);
    }
  });
});

৪. কাস্টমাইজেশন

jQueryUI Spinner উইজেটটি বেশ কিছু কাস্টমাইজেশন অপশন সরবরাহ করে। কিছু সাধারণ কাস্টমাইজেশন হল:

• min: স্পিনারের ন্যূনতম মান।
• max: স্পিনারের সর্বোচ্চ মান।
• step: প্রতিটি স্পিনে মান কতটা বাড়বে বা কমবে।
• numberFormat: সংখ্যার প্রদর্শন ফরম্যাট (যেমন, দশমিক স্থান বা বড় সংখ্যা বিন্যাস)।

কাস্টম উদাহরণ:

$(document).ready(function() {
  $("#spinner").spinner({
    min: 10,       // ন্যূনতম মান ১০
    max: 500,      // সর্বোচ্চ মান ৫০০
    step: 5,       // প্রতি স্পিনে ৫ এর গুণে মান বাড়বে বা কমবে
    numberFormat: "n",  // সংখ্যা সাধারণ ফরম্যাটে প্রদর্শিত হবে (যেমন: 1000, 1500)
    spin: function(event, ui) {
      $("#spinner-value").text("বর্তমান মান: " + ui.value);  // মান পরিবর্তন হলে তা প্রদর্শন
    }
  });
});

৫. ডিজাইন কাস্টমাইজেশন

আপনি স্পিনারের ডিজাইন CSS দিয়ে কাস্টমাইজ করতে পারেন। যেমন:

#spinner {
  width: 100px;   /* স্পিনারের প্রস্থ */
  padding: 5px;   /* প্যাডিং */
}

.ui-spinner-button {
  background-color: #4CAF50;  /* বাটনের ব্যাকগ্রাউন্ড রঙ */
  color: white;                /* বাটনের টেক্সট রঙ */
}

এটি স্পিনারের বাটন এবং ইনপুট ফিল্ডের ডিজাইন কাস্টমাইজ করতে সাহায্য করবে।

৬. বিশেষ বৈশিষ্ট্য

• ডিফল্ট মান পরিবর্তন: আপনি স্পিনারের ডিফল্ট মান পরিবর্তন করতে পারেন।

  $("#spinner").spinner("value", 50);  // স্পিনার এর মান ৫০ করা হবে
  

• স্পিনারের মান আপডেট করা:

  $("#spinner").spinner("stepUp", 10);  // স্পিনারের মান ১০ বাড়ানো হবে
  $("#spinner").spinner("stepDown", 5);  // স্পিনারের মান ৫ কমানো হবে
  

৭. ইভেন্ট হ্যান্ডলিং

আপনি স্পিনারের কিছু নির্দিষ্ট ইভেন্টও হ্যান্ডল করতে পারেন, যেমন start, stop, এবং spin ইভেন্টগুলি।

উদাহরণ:

$(document).ready(function() {
  $("#spinner").spinner({
    start: function(event, ui) {
      console.log("স্পিনার শুরু হয়েছে");
    },
    stop: function(event, ui) {
      console.log("স্পিনার থেমে গেছে, মান: " + ui.value);
    }
  });
});

উপসংহার

jQueryUI Spinner উইজেট একটি সহজ এবং কার্যকরী উপাদান যা ব্যবহারকারীদের একটি সংখ্যা নির্বাচন করতে সহায়তা করে। আপনি এটি সহজেই কাস্টমাইজ করতে পারেন, যেমন মানের পরিসীমা (min/max), increment (step), এবং ডিজাইন কাস্টমাইজেশন। এটি ওয়েব ফর্মগুলির জন্য খুবই উপকারী, যেখানে ব্যবহারকারীরা নির্দিষ্ট মানের মধ্যে সংখ্যা নির্বাচন করতে পারে।

jQueryUI বিভিন্ন ইন্টারেক্টিভ উইজেট সরবরাহ করে, যার মধ্যে Slider এবং Spinner অন্যতম। এই দুটি উইজেট ব্যবহারকারীদের ইনপুট নেওয়ার জন্য একটি গ্রাফিক্যাল উপায় প্রদান করে, এবং প্রতিটি ইনপুটের জন্য কিছু events বা ইভেন্ট হ্যান্ডলিং প্রয়োজন হতে পারে। নিচে আমরা দেখব কিভাবে Slider এবং Spinner এর মধ্যে events পরিচালনা করা যায়।

Slider উইজেট এবং Events

Slider উইজেট ব্যবহারকারীকে একটি পরিসরের মধ্যে মান নির্বাচন করতে সাহায্য করে। এটি সাধারণত একটি বার বা লাইনের উপর চলমান একটি পয়েন্ট (থাম্ব) দ্বারা নিয়ন্ত্রণ করা হয়। jQueryUI Slider উইজেটটি বিভিন্ন ধরনের ইভেন্ট হ্যান্ডলিং সমর্থন করে, যেমন:

১. slide ইভেন্ট

slide ইভেন্টটি তখন ট্রিগার হয় যখন ব্যবহারকারী স্লাইডারটি টেনে নেন এবং মান পরিবর্তন হয়।

$(function() {
  $( "#slider" ).slider({
    slide: function(event, ui) {
      $( "#slider-value" ).text( ui.value ); // মান প্রদর্শন
    }
  });
});

এখানে, slide ইভেন্টের মাধ্যমে আমরা স্লাইডারটি টেনে মান পরিবর্তন করার সময় স্লাইডারের মান ui.value দিয়ে বের করি এবং সেটি একটি এলিমেন্টে দেখাই।

২. change ইভেন্ট

change ইভেন্টটি তখন ট্রিগার হয় যখন স্লাইডারটি কোন নতুন মানে পৌঁছায় (যতক্ষণ না ব্যবহারকারী থামান)।

$(function() {
  $( "#slider" ).slider({
    change: function(event, ui) {
      $( "#slider-change-value" ).text( ui.value ); // পরিবর্তিত মান দেখানো
    }
  });
});

এখানে change ইভেন্টটি ব্যবহৃত হচ্ছে, যা স্লাইডার মান পরিবর্তন হওয়ার পর কার্যকর হবে।

৩. start এবং stop ইভেন্ট

start ইভেন্টটি তখন ট্রিগার হয় যখন ব্যবহারকারী স্লাইডারটি টেনে শুরু করেন, এবং stop ইভেন্টটি তখন ট্রিগার হয় যখন ব্যবহারকারী স্লাইডিং থামান।

$(function() {
  $( "#slider" ).slider({
    start: function(event, ui) {
      console.log("Slider started");
    },
    stop: function(event, ui) {
      console.log("Slider stopped at: " + ui.value);
    }
  });
});

এখানে, start এবং stop ইভেন্ট ব্যবহার করে স্লাইডারটি শুরু এবং শেষ হওয়ার সময় কনসোল লগ তৈরি করা হচ্ছে।

Spinner উইজেট এবং Events

Spinner উইজেটটি ব্যবহারকারীদের জন্য একটি ইনপুট ফিল্ড প্রদান করে, যেখানে তারা সংখ্যার মান বাড়াতে বা কমাতে পারেন। এটি সাধারণত ব্যবহারকারীকে নির্দিষ্ট পরিসরে মান বাড়াতে বা কমাতে সাহায্য করে। Spinner উইজেটেও বেশ কিছু ইভেন্ট হ্যান্ডলিং করা যায়, যেমন:

১. spin ইভেন্ট

spin ইভেন্টটি তখন ট্রিগার হয় যখন Spinner ইনপুটের মান পরিবর্তন হয়, অর্থাৎ ব্যবহারকারী "+" বা "-" বাটন ক্লিক করেন।

$(function() {
  $( "#spinner" ).spinner({
    spin: function(event, ui) {
      $( "#spinner-value" ).text( ui.value ); // মান প্রদর্শন
    }
  });
});

এখানে, spin ইভেন্ট ব্যবহারকারী যখন Spinner বাটন ক্লিক করেন, তখন নতুন মান ui.value দ্বারা আনা হয় এবং সেটি প্রদর্শন করা হয়।

২. change ইভেন্ট

change ইভেন্টটি তখন ট্রিগার হয় যখন Spinner ইনপুটের মান পরিবর্তিত হয় এবং ব্যবহারকারী ইনপুট ফিল্ডটি পরিবর্তন করেন।

$(function() {
  $( "#spinner" ).spinner({
    change: function(event, ui) {
      $( "#spinner-change-value" ).text( ui.value ); // পরিবর্তিত মান দেখানো
    }
  });
});

এখানে change ইভেন্ট ব্যবহার করে ইনপুট মান পরিবর্তন হওয়ার পর আমরা নতুন মান দেখাচ্ছি।

৩. focus এবং blur ইভেন্ট

focus ইভেন্টটি তখন ট্রিগার হয় যখন Spinner ইনপুট ফিল্ডে ফোকাস করা হয়, এবং blur ইভেন্টটি তখন ট্রিগার হয় যখন ফোকাস হারানো হয়।

$(function() {
  $( "#spinner" ).spinner({
    focus: function() {
      console.log("Spinner input focused");
    },
    blur: function() {
      console.log("Spinner input blurred");
    }
  });
});

এখানে, focus এবং blur ইভেন্ট ব্যবহৃত হচ্ছে ফোকাস এবং ব্লার ইভেন্ট ট্র্যাক করার জন্য।

উপসংহার

Slider এবং Spinner উইজেটগুলি jQueryUI এর অন্যতম শক্তিশালী ইন্টারফেস উপাদান। এগুলির সাথে ইভেন্ট পরিচালনা করার মাধ্যমে আপনি ওয়েব পৃষ্ঠার ব্যবহারকারীদের জন্য আরও ইন্টারঅ্যাকটিভ এবং উন্নত অভিজ্ঞতা তৈরি করতে পারেন। slide, change, spin, start, এবং stop ইভেন্টের মাধ্যমে আপনি এগুলির কার্যকলাপ নিরীক্ষণ এবং নিয়ন্ত্রণ করতে পারেন। jQueryUI এর ইভেন্ট হ্যান্ডলিং সহজ এবং কার্যকর, যা আপনার ওয়েব অ্যাপ্লিকেশনের ইউজার ইন্টারফেসকে আরও স্মুথ এবং প্রাকৃতিক করে তোলে।