آموزش کامل استفاده از Range در بوت استرپ

0 دیدگاه

در این بخش با نحوه استفاده از کنترل Range در فرم های بوت استرپ آشنا می‌شوید. این کنترل یک ابزار تعاملی است که به کاربر اجازه می‌دهد مقدار دلخواهی را از میان یک بازه عددی انتخاب کند. کافی است کاربر با کشیدن نوار لغزنده، مقدار موردنظر را مشخص کند.

مثال پایه Range در بوت استرپ

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap Form - Range</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <label for="basicRange" class="form-label">Range</label>
    <input type="range" class="form-range" id="basicRange">
  </body>
  </html>

<!DOCTYPE html>

<head>

<title>Bootstrap Form - Range</title>

</head>

<body>

<label for="basicRange" class="form-label">Range</label>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

غیرفعال کردن کنترل Range

برای غیرفعال کردن کنترل Range، از ویژگی disabled استفاده کنید. با افزودن این ویژگی به عنصر <input type="range">، امکان تعامل کاربر با کنترل غیرفعال می‌شود.

وقتی کنترل Range در حالت غیرفعال قرار می‌گیرد، ظاهر آن به رنگ خاکستری درمی‌آید، نمی‌توان روی آن کلیک کرد یا فوکوس داد، و هیچ رویداد اشاره گری (Pointer Event) را دریافت نمی‌کند. این ویژگی زمانی کاربرد دارد که بخواهید یک مقدار را فقط نمایش دهید، بدون اینکه کاربر بتواند آن را تغییر دهد.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Form - Range</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <label for="disabledRange" class="form-label">Range</label>
        <input type="range" class="form-range" id="disabledRange" disabled>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap Form - Range</title>

</head>

<body>

<label for="disabledRange" class="form-label">Range</label>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

تعیین حداقل و حداکثر مقدار Range در بوت استرپ

به‌صورت پیش‌فرض، مقدار شروع (min) برای Range عددی برابر با ۰ و مقدار پایان (max) برابر با ۱۰۰ است. اگر بخواهید محدوده‌ای متفاوت تعریف کنید، می‌توانید با استفاده از ویژگی‌های min و max در تگ <input>، مقادیر دلخواه را مشخص کنید.

برای مثال، اگر مقدار min="10" و max="50" را تنظیم کنید، کاربر تنها می‌تواند عددی بین ۱۰ تا ۵۰ انتخاب کند. این ویژگی به شما کمک می‌کند کنترل دقیق‌تری روی بازه ورودی داشته باشید و از انتخاب مقادیر خارج از محدوده جلوگیری کنید.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Form - Range</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <label for="minmaxrange" class="form-label">Range</label>
        <input type="range" class="form-range" min="0" max="9" id="minmaxrange">
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap Form - Range</title>

</head>

<body>

<label for="minmaxrange" class="form-label">Range</label>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

تعیین گام های تغییر مقدار (Step)

ویژگی step در Range عددی مشخص می‌کند که مقدار این ورودی در هر حرکت، چقدر افزایش یا کاهش پیدا کند. به‌طور پیش‌فرض، مقدار عددی با گام ۱ تغییر می‌کند، اما شما می‌توانید با تعیین مقدار دلخواه برای ویژگی step، کنترل دقیق‌تری بر تغییرات داشته باشید. در بسیاری از مثال‌هایی که در آموزش پروژه محور بوت استرپ ارائه می‌شوند، از همین قابلیت برای طراحی فرم‌های حرفه‌ای و قابل تنظیم استفاده می‌شود.

برای مثال، اگر مقدار step="0.5" را تنظیم کنید، هر بار که کاربر نوار را جابه‌جا می‌کند، مقدار ورودی به اندازه ۰.۵ واحد تغییر می‌کند. در نتیجه، تعداد گام‌ها نسبت به حالت پیش‌فرض دو برابر می‌شود و کاربر می‌تواند مقادیر میانی را نیز انتخاب کند.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Form - Range</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <label for="stepRange" class="form-label">Range</label>
      <input type="range" class="form-range" min="0" max="7" step="0.5" id="stepRange">
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap Form - Range</title>

</head>

<body>

<label for="stepRange" class="form-label">Range</label>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

به این مطلب امتیاز دهید

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

آموزش گام به گام برنامه نویسی اندروید با B4A (پروژه محور)

انتشار: ۴ تیر ۱۴۰۴

آموزش کامل استفاده از Range در بوت استرپ

مثال پایه Range در بوت استرپ

غیرفعال کردن کنترل Range

تعیین حداقل و حداکثر مقدار Range در بوت استرپ

تعیین گام های تغییر مقدار (Step)

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط