مرکزی مواد پر جائیں۔ ڈاکس نیویگیشن پر جائیں۔
in English

رینج

مسلسل کراس براؤزر اسٹائلنگ اور بلٹ ان حسب ضرورت کے لیے ہمارے حسب ضرورت رینج ان پٹ استعمال کریں۔

جائزہ

کے ساتھ حسب ضرورت <input type="range">کنٹرول بنائیں .form-range۔ ٹریک (پس منظر) اور انگوٹھا (قدر) دونوں براؤزرز میں ایک جیسے ظاہر ہونے کے لیے اسٹائل کیے گئے ہیں۔ چونکہ صرف Firefox ہی ان کے ٹریک کو انگوٹھے کے بائیں یا دائیں طرف سے بصری طور پر پیشرفت کی نشاندہی کرنے کے ذریعہ "فلنگ" کی حمایت کرتا ہے، ہم فی الحال اس کی حمایت نہیں کرتے ہیں۔

<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">

معذور

disabledبولین انتساب کو ایک ان پٹ پر شامل کریں تاکہ اسے خاکستری شکل دینے اور پوائنٹر ایونٹس کو ہٹانے کے لیے۔

<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>

کم سے کم اور زیادہ سے زیادہ

رینج ان پٹ میں بالترتیب minاور max0اور کے لیے مضمر قدریں ہوتی ہیں۔ آپ اور اوصاف 100استعمال کرنے والوں کے لیے نئی قدریں بتا سکتے ہیں ۔minmax

<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">

قدم

پہلے سے طے شدہ طور پر، رینج ان پٹ "اسنیپ" کو عددی قدروں میں لے جاتی ہے۔ اسے تبدیل کرنے کے لیے، آپ ایک stepقدر کی وضاحت کر سکتے ہیں۔ ذیل کی مثال میں، ہم استعمال کرکے اقدامات کی تعداد کو دوگنا کرتے step="0.5"ہیں۔

<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">

سس

متغیرات

$form-range-track-width:          100%;
$form-range-track-height:         .5rem;
$form-range-track-cursor:         pointer;
$form-range-track-bg:             $gray-300;
$form-range-track-border-radius:  1rem;
$form-range-track-box-shadow:     $box-shadow-inset;

$form-range-thumb-width:                   1rem;
$form-range-thumb-height:                  $form-range-thumb-width;
$form-range-thumb-bg:                      $component-active-bg;
$form-range-thumb-border:                  0;
$form-range-thumb-border-radius:           1rem;
$form-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1);
$form-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow;
$form-range-thumb-focus-box-shadow-width:  $input-focus-width; // For focus box shadow issue in Edge
$form-range-thumb-active-bg:               tint-color($component-active-bg, 70%);
$form-range-thumb-disabled-bg:             $gray-500;
$form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;