ڕێژە
زانیارییەکانی مەودای تایبەتمەندمان بەکاربهێنە بۆ ستایلکردنی بەردەوامی وێبگەڕی یەکتر و خۆکارکردنی ناوەکی.
تێڕوانینێکی گشتی
دروستکردنی <input type="range">
کۆنتڕۆڵی تایبەت بە .form-range
. تراکەکە (پاشخانەکە) و پەنجەی گەورە (بەهاکە) هەردووکیان ستایلیان بۆ دانراوە بۆ ئەوەی لە سەرانسەری وێبگەڕەکاندا وەک یەک دەربکەون. بەو پێیەی تەنها فایەرفۆکس پشتگیری لە "پڕکردنەوەی" تراکەکەیان دەکات لە لای چەپ یان ڕاستی پەنجەی گەورەوە وەک ئامرازێک بۆ ئاماژەدان بە پێشکەوتن بە شێوەیەکی بینراو، ئێمە لە ئێستادا پشتگیری ناکەین.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">
کەم ئەندام
تایبەتمەندی boolean لەسەر ئینپوتێک زیاد بکە 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;