Ауқым
Тұрақты кросс-шолғышты сәндеу және кірістірілген теңшеу үшін біздің реттелетін ауқым кірістерін пайдаланыңыз.
Шолу
көмегімен реттелетін <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;