حد
مسلسل ڪراس برائوزر اسٽائلنگ ۽ بلٽ ان ڪسٽمائيزيشن لاءِ اسان جي ڪسٽم رينج انپٽس استعمال ڪريو.
اوسر
سان ڪسٽم <input type="range">ڪنٽرول ٺاهيو .form-range. ٽريڪ (پس منظر) ۽ انگوٺ (قيمت) ٻنهي برائوزرن ۾ هڪجهڙائي ظاهر ڪرڻ لاءِ اسٽائل ٿيل آهن. جيئن ته صرف فائر فاڪس انهن جي ٽريڪ کي "ڀڻ" جي حمايت ڪري ٿو انگوٽي جي کاٻي يا ساڄي پاسي کان بصري طور تي پيش رفت کي ظاهر ڪرڻ لاء، اسان في الحال ان جي حمايت نٿا ڪريون.
<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;