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 siam 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
disabled
Input 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
min
Range inputs hian leh max
— 0
leh , te tan implicit value an nei a 100
. min
and max
attribute 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 step
value 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;