Zau zawng
Kan custom range input te hmang la, cross-browser styling leh built-in customization mumal tak neih theih nan.
A tlangpuiin
hmangin custom <input type="range">control siam rawh .form-range. Track (background) leh thumb (value) te hi browser hrang hrangah a inang vek turin style an nei vek a. Firefox chauh hian hmasawnna hmuh theiha lantir nan an track veilam emaw dinglam emaw atanga “filling” an support avangin tunah hian kan support lo.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">Ramtuileilo
disabledInput pakhatah boolean attribute chu grayed out appearance pe turin dah la, pointer events te chu paih chhuak rawh .
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>Min leh max
minRange inputs hian leh max— 0leh , te tan implicit value an nei a 100. minand maxattribute hmangtute tan value thar i dah thei bawk.
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">Step hrang hrang
Default-ah chuan range input chu integer value-ah “snap” a ni. Hei hi thlak danglam tur chuan stepvalue i tarlang thei bawk. A hnuaia entirnan hian 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">Sass a ni
Variables te pawh a awm
$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;