انتخاب بازه Range
کامپوننت «انتخاب بازه» ابزاری تعاملی جهت تعیین محدودهای مشخص از مقادیر عددی است که معمولاً در فیلترگذاری دادهها، مانند قیمت، تاریخ یا امتیاز، مورد استفاده قرار میگیرد. این کامپوننت امکان کنترل دقیق بر حداقل و حداکثر مقدار را برای کاربر فراهم میسازد.
ویژگیهای کلیدی:
- تعاملپذیری بالا: قابلیت تنظیم بازه از طریق کشیدن دستههای قابل حرکت روی نوار محدوده
- نمایش عددی مقادیر انتخابشده: جهت افزایش شفافیت و دقت در انتخاب
- واکنشگرا (Responsive): سازگار با انواع دستگاهها از جمله موبایل، تبلت و دسکتاپ
- قابل ترکیب با سایر فیلترها: جهت بهینهسازی تجربه کاربری در جستجو و مرور دادهها
کاربردهای متداول:
- تعیین بازه قیمت در فروشگاههای اینترنتی
- فیلترگذاری بر اساس تاریخ در سامانههای گزارشگیری
- انتخاب محدوده امتیاز در سیستمهای رتبهبندی و بررسی
WNRange یک کامپوننت انتخاب بازه عددی با قابلیت چند نقطه (multi-thumb) است که برای فیلترگذاری، جستجو و فرمهای تعاملی کاربرد دارد. این کامپوننت کاملاً واکنشگرا بوده و از راست به چپ و چپ به راست پشتیبانی میکند.
نحوه استفاده سریع
برای تعیین بازه موردنظر، کافیست دستههای موجود در دو طرف نوار را به موقعیت دلخواه منتقل نمایید. مقادیر انتخابشده بهصورت عددی در زیر نوار نمایش داده میشوند و در لحظه قابل ویرایش هستند.
مثال
LTR
Up tooltip
Down tooltip
3 point
Step 10
No tip
Read only
Disabled
RTL
مقدار در بالا
مقدار در پایین
3 نقطه
پرش 10 تایی
بدون نمایش
مثال 2
LTR
RTL
خصوصیات (Attributes)
| نام | نوع | پیشفرض | توضیحات |
|---|---|---|---|
| min | عدد | 0 | حداقل مقدار قابل انتخاب |
| max | عدد | 100 | حداکثر مقدار قابل انتخاب |
| count | عدد | 2 | تعداد نقاط قابل انتخاب (thumb) |
| step | عدد | 1 | گام تغییر مقدار هنگام جابجایی thumb |
| unit | رشته | "" | واحد نمایش مقدار (مثلاً %, $) |
| format | رشته | "" | فورمت نمایش مقدار (مثلاً #,0) |
| tooltip | رشته | none | محل نمایش مقدار انتخابشده (up, down, none) |
| value | رشته | min,max | مقادیر اولیه نقاط انتخابشده، با کاما جدا شود (مثلاً "10,60") |
| readonly | بولین | false | اگر مقداردهی شود، کاربر فقط میتواند مقادیر را مشاهده کند و امکان تغییر وجود ندارد. |
| disabled | بولین | false | اگر مقداردهی شود، کامپوننت غیرفعال میشود و هیچ تعاملی با کاربر ندارد. |
| onchange | تابع | - | رویداد تغییر مقدار، قابل تعریف به صورت جاوااسکریپت |
رویدادها
-
onchange / change: با تغییر مقدار هر thumb، این رویداد اجرا میشود و میتوانید مقادیر جدید را دریافت و استفاده کنید.
<div class="range" ... onchange="console.log(t.values)"></div>
نکات مهم
- کامپوننت کاملاً واکنشگرا بوده و روی موبایل و دسکتاپ بهدرستی کار میکند.
- برای جلوگیری از اسکرول صفحه هنگام جابجایی thumb روی موبایل، این قابلیت بهصورت داخلی مدیریت شده است.
- مقادیر thumbها هیچگاه روی هم قرار نمیگیرند و فاصله حداقل برابر با مقدار step رعایت میشود.
-
میتوانید مقدار کامپوننت را به صورت برنامهنویسی تغییر دهید:
WN('range1').WNRange.value = '100,900';
نکات توسعهدهندگان
- برای دریافت مقادیر انتخابشده از آرایه t.values استفاده کنید.
- میتوانید با تغییر مقدار value، thumbها را به موقعیت دلخواه منتقل کنید.
- اگر نیاز به سفارشیسازی ظاهر دارید، کلاسهای CSS مربوط به .range, .thumb, .tooltip-value را تغییر دهید.
استفاده از جاوااسکریپت
برای کنترل و مقداردهی کامپوننت WNRange به صورت برنامهنویسی، میتوانید خصوصیات آن را از طریق جاوااسکریپت تغییر دهید.
پس از مقداردهی هر یک از خصوصیات (مانند min، max، count، step، value و غیره)، حتماً تابع refresh را صدا بزنید تا تغییرات در رابط کاربری اعمال شود.
// نمونه مقداردهی و بروزرسانی کامپوننت
var range = WN('range1').WNRange;
range.min = 50;
range.max = 500;
range.count = 3;
range.step = 10;
range.value = "60,200,400";
range.refresh(); // اعمال تغییرات در UI
تابع refresh باعث میشود وضعیت ظاهری و مقادیر کامپوننت بهروزرسانی شود و تغییرات اعمالشده در خصوصیات بلافاصله نمایش داده شوند.