Dirêjahî

Ji bo şêwazê gerokê domdar û xwerûkirina xwerû têketinên meya xwerû ya xwerû bikar bînin.

Li ser vê rûpelê

Têgihiştinî

Kontrolên <input type="range">xwerû bi .form-range. Track (paşxane) û tilikê (nirx) her du jî têne şêwaz kirin ku di nav gerokan de wekî hev xuya bibin. Ji ber ku tenê Firefox piştgirî dide "dagirtina" şopa xwe ji çepê an rastê tilikê wekî navgînek ku bi dîtbarî pêşkeftinê nîşan bide, em niha piştgirî nadin.

Rêzeya nimûne

html

<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">

Bêmecel

Taybetmendiya boolean disabledli ser têketinê zêde bikin da ku xuyangek gewr bide wê, bûyerên nîşanker jêbirin û pêşî li balkişandinê bigire.

Rêzeya astengdar

html

<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>

Min û herî zêde

minTêketinên rêzê bi rêzdarî ji bo û max- 0û nirxên nepenî 100hene. minHûn dikarin ji bo yên ku taybetmendiyên û bikar tînin nirxên nû diyar bikin max.

Rêzeya nimûne

html

<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">

Steps

Ji hêla xwerû ve, rêjeyê "snap" li nirxên yekjimar vedigire. Ji bo guhertina vê, hûn dikarin stepnirxek diyar bikin. Di mînaka jêrîn de, em bi karanîna jimareya gavan ducar dikin step="0.5".

Rêzeya nimûne

html

<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

Variables

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