باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
in English

ڕێژە

زانیارییەکانی مەودای تایبەتمەندمان بەکاربهێنە بۆ ستایلکردنی بەردەوامی وێبگەڕی یەکتر و خۆکارکردنی ناوەکی.

تێڕوانینێکی گشتی

دروستکردنی <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و max0و 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;