bootstrap

Range در بوت‌استرپ

26 آوریل

عنصر <input type="range"> یک روش کاربرپسند برای انتخاب مقدار عددی در یک بازه مشخص فراهم می‌کند. بوت‌استرپ این کنترل بومی را با استایل‌دهی یکپارچه، پاسخگویی بهتر و ادغام آسان در چیدمان فرم‌ها بهبود می‌بخشد. این راهنمای جامع به بررسی عمیق ورودی‌های رِنج در بوت‌استرپ، شامل استایل‌دهی، گزینه‌های سفارشی‌سازی، ملاحظات دسترسی‌پذیری و حتی پیاده‌سازی‌های پیشرفته می‌پردازد.

استایل‌دهی ورودی Range در بوت‌استرپ (.form-range)

اساس استایل‌دهی ورودی رنج در بوت‌استرپ، کلاس .form-range است. با اعمال این کلاس به عنصر <input type="range">، ظاهر آن بلافاصله تغییر می‌کند:

  • ریل و دستگیره‌ی یکنواخت: استایل استاندارد برای ریل (track) و دستگیره (thumb) اعمال می‌شود تا در مرورگرهای مختلف ظاهری یکسان داشته باشند.
  • بازخورد بصری بهبود یافته: موقعیت دستگیره روی ریل مقدار انتخاب شده را به وضوح نمایش می‌دهد.
  • رفتار پاسخگو: به خوبی با سیستم گرید بوت‌استرپ ادغام شده و عرض خود را با والد تطبیق می‌دهد.

نمونه کد HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Bootstrap Range</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h2>Basic Bootstrap Range</h2>
        <label for="customRange" class="form-label">Example range</label>
        <input type="range" class="form-range" id="customRange">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

ادغام در فرم‌ها و سیستم گرید

سیستم گرید بوت‌استرپ امکان چیدمان انعطاف‌پذیر ورودی‌های رنج در فرم‌ها را فراهم می‌کند:

موقعیت‌یابی ستونی: با استفاده از کلاس‌های .row و .col-* می‌توانید ورودی‌های رنج را همراه با برچسب‌ها و سایر المان‌های فرم تراز کنید.

<form class="row g-3 mt-4">
    <div class="col-md-6">
        <label for="volumeControl" class="form-label">Volume</label>
        <input type="range" class="form-range" id="volumeControl">
    </div>
    <div class="col-md-6">
        <label for="brightnessControl" class="form-label">Brightness</label>
        <input type="range" class="form-range" id="brightnessControl">
    </div>
</form>

گروه‌بندی فرم‌ها (.mb-3): برای ایجاد فاصله عمودی بین ورودی‌ها و برچسب‌هایشان از .mb-3 استفاده کنید.

سفارشی‌سازی رفتار و ظاهر ورودی Range

عنصر <input type="range"> دارای ویژگی‌هایی برای سفارشی‌سازی است که بوت‌استرپ از آن‌ها پشتیبانی می‌کند:

  • min و max: تعیین حداقل و حداکثر مقدار.
  • step: مشخص کردن گام‌های تغییر مقدار.
  • value: تعیین مقدار اولیه.

نمونه:

<label for="temperatureControl" class="form-label">Temperature (Celsius)</label>
<input type="range" class="form-range" id="temperatureControl" min="0" max="100" step="5" value="25">
<div class="form-text">Select a temperature between 0 and 100 degrees Celsius, in increments of 5.</div>

وضعیت‌های اعتبارسنجی (.is-valid, .is-invalid)

استایل‌دهی اعتبارسنجی فرم‌ها در بوت‌استرپ برای ورودی‌های رنج نیز قابل استفاده است:

  • وضعیت معتبر: با اعمال .is-valid کادری سبز دور کنترل ظاهر می‌شود.
  • وضعیت نامعتبر: با اعمال .is-invalid کادری قرمز نمایش داده می‌شود.

نمونه:

<div class="mb-3">
    <label for="validRange" class="form-label">Valid Range</label>
    <input type="range" class="form-range is-valid" id="validRange" min="0" max="10">
    <div class="valid-feedback">Looks good!</div>
</div>

<div class="mb-3">
    <label for="invalidRange" class="form-label">Invalid Range</label>
    <input type="range" class="form-range is-invalid" id="invalidRange" min="0" max="10" value="15">
    <div class="invalid-feedback">Value must be within the range of 0 to 10.</div>
</div>

سفارشی‌سازی پیشرفته و نکات اضافی:

استایل‌دهی با CSS سفارشی: برای تغییر بیشتر ظاهر (مثلاً تغییر شکل دستگیره یا رنگ ریل) نیاز به استفاده از CSS سفارشی دارید.

.form-range::-webkit-slider-thumb {
    background-color: #007bff;
    border: none;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    cursor: pointer;
    -webkit-appearance: none;
}

.form-range::-moz-range-thumb {
    background-color: #007bff;
    border: none;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    cursor: pointer;
}

.form-range::-webkit-slider-runnable-track {
    background-color: #dee2e6;
    height: 5px;
    cursor: pointer;
}

.form-range::-moz-range-track {
    background-color: #dee2e6;
    height: 5px;
    cursor: pointer;
}

ادغام جاوااسکریپت برای بازخورد بی درنگ:

<label for="liveValueRange" class="form-label">Range with Live Value</label>
<input type="range" class="form-range" id="liveValueRange" min="0" max="100" value="50">
<div id="rangeValue">Current Value: 50</div>

<script>
    const rangeInput = document.getElementById('liveValueRange');
    const valueDisplay = document.getElementById('rangeValue');

    rangeInput.addEventListener('input', function() {
        valueDisplay.textContent = `Current Value: ${this.value}`;
    });
</script>
  • دسترس‌پذیری:
    • استفاده از برچسب‌های واضح (<label>) و نسبت دادن به ورودی (for).
    • امکان تغییر مقدار با صفحه کلید (کلیدهای پیکان).
    • استفاده از ویژگی‌های ARIA مثل aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext برای دسترسی بهتر.

ایده‌های طراحی خلاقانه برای ورودی‌های Range با بوت‌استرپ:

  • اسلایدرهای موضوعی: سفارشی کردن رنگ‌ها مطابق تم برنامه.
  • اسلایدرهای عمودی: با استفاده از transform در CSS.
  • بازه با نشانه‌های گام‌بندی شده: استفاده از گرادیان یا تصویر پس‌زمینه برای نمایش گام‌ها.
  • اسلایدرهای با دو دستگیره: استفاده از کتابخانه‌هایی مثل noUiSlider یا Ion.RangeSlider.
  • افزایش تدریجی: از یک ورودی پایه شروع کرده و سپس با CSS و JS آن را ارتقا دهید.

نتیجه‌گیری: توانمندسازی انتخاب مقدار با ورودی‌های Range در بوت‌استرپ

بوت‌استرپ پایه‌ای محکم برای استفاده و استایل‌دهی ورودی‌های رنج در فرم‌های وب شما فراهم می‌کند. با استفاده از کلاس .form-range و شناخت ویژگی‌های بومی همراه با امکانات سفارشی‌سازی CSS و جاوااسکریپت، می‌توانید کنترل‌هایی کاربرپسند و زیبا برای انتخاب مقادیر عددی ایجاد کنید. حتماً دسترس‌پذیری را در اولویت قرار دهید و برای نیازهای پیشرفته‌تر، از کتابخانه‌های جاوااسکریپت سازگار با بوت‌استرپ بهره بگیرید.

جدیدتر گروه‌های ورودی در بوت استرپ (Input Group)
بازگشت به لیست
قدیمی تر چک‌باکس‌ها و دکمه‌های رادیویی: راهنمای کامل بوت‌استرپ

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *