رینج
مسلسل کراس براؤزر اسٹائلنگ اور بلٹ ان حسب ضرورت کے لیے ہمارے حسب ضرورت رینج ان پٹ استعمال کریں۔
جائزہ
کے ساتھ حسب ضرورت <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اور max— 0اور کے لیے مضمر قدریں ہوتی ہیں۔ آپ اور اوصاف 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;