Ауқым

Тұрақты кросс-шолғышты сәндеу және кірістірілген теңшеу үшін біздің реттелетін ауқым кірістерін пайдаланыңыз.

Бұл бетте

Шолу

көмегімен реттелетін <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;