Range Slider: একাধিক মানের জন্য রেঞ্জ স্লাইডার তৈরি করা

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 একটি শক্তিশালী টুল যা ব্যবহারকারীদের একটি নির্দিষ্ট পরিসরের মধ্যে মান নির্বাচন করতে সাহায্য করে। এটি দুইটি স্লাইডার হ্যান্ডেল দিয়ে কাজ করে, যা আপনাকে সঠিক পরিসীমা নির্বাচন করার সুবিধা দেয়। কাস্টমাইজেশন অপশন ব্যবহার করে আপনি রেঞ্জ স্লাইডারটি আপনার প্রয়োজন অনুযায়ী পরিবর্তন করতে পারবেন, যেমন স্লাইডারের পরিসীমা, মানের প্রদর্শন ফরম্যাট, এবং অন্যান্য ইন্টারফেস কাস্টমাইজেশন।