ڕێژە
زانیارییەکانی مەودای تایبەتمەندمان بەکاربهێنە بۆ ستایلکردنی بەردەوامی وێبگەڕی یەکتر و خۆکارکردنی ناوەکی.
تێڕوانینێکی گشتی
دروستکردنی <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">هەنگاوەکان
بە شێوەیەكی بنەڕەتی، هاتنەژوورەوەی مەودا “snap” بۆ بەها ژمارە تەواوەكان. بۆ گۆڕینی ئەمە دەتوانیت 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;