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