1️⃣ Basic Range (نوار لغزنده ساده)

• کلاس: form-range

• نوع input: range

<label for="customRange1" class="form-label">نوار لغزنده ساده</label>
<input type="range" class="form-range" id="customRange1">

• پیش‌فرض حداقل 0 و حداکثر 100

• مقدار پیش‌فرض: value

2️⃣ Range با Min و Max

<label for="customRange2" class="form-label">محدوده 0 تا 50</label>
<input type="range" class="form-range" min="0" max="50" value="25" id="customRange2">

• min → حداقل

• max → حداکثر

• value → مقدار اولیه

3️⃣ Step (قدم‌ها)

• تعیین واحد تغییر مقدار با step

<label for="customRange3" class="form-label">قدم 5</label>
<input type="range" class="form-range" min="0" max="100" step="5" value="50" id="customRange3">

• تغییر مقدار در نوار لغزنده به صورت 0, 5, 10,…

4️⃣ Disabled Range (نوار لغزنده غیر فعال)

<label for="customRange4" class="form-label">غیر فعال</label>
<input type="range" class="form-range" id="customRange4" disabled>

• disabled → کاربر نمی‌تواند مقدار را تغییر دهد

5️⃣ Displaying Value (نمایش مقدار)

• برای نمایش مقدار فعلی نوار، باید از JS استفاده شود

<label for="customRange5" class="form-label">مقدار: <span id="rangeValue">50</span></label>
<input type="range" class="form-range" min="0" max="100" value="50" id="customRange5">

<script>
  const rangeInput = document.getElementById('customRange5');
  const rangeValue = document.getElementById('rangeValue');
  
  rangeInput.addEventListener('input', () => {
    rangeValue.textContent = rangeInput.value;
  });
</script>

✅ نکات مهم

• کلاس form-range ظاهر زیبا و ریسپانسیو برای Slider ایجاد می‌کند.

• می‌توان min, max, step, value را تنظیم کرد.

• غیر فعال کردن با disabled ساده است.

• برای مشاهده مقدار فعلی باید JS استفاده شود.