Zau zawng

Kan custom range input te hmang la, cross-browser styling leh built-in customization mumal tak neih theih nan.

He page ah hian

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.

Entirna range

html tih a ni

<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 la, focus a awm loh nan .

Disabled range a ni

html tih a ni

<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.

Entirna range

html tih a ni

<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".

Entirna range

html tih a ni

<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;