Labɛnko ɲuman
Baara kɛ ni an ka ladamu range inputs ye walasa ka cross-browser styling basigilen sɔrɔ ani customization min bɛ don a kɔnɔ.
Kuma bɛɛ lajɛlen
Aw bɛ ladamukow dabɔ <input type="range">ni .form-range. Track (kɔfɛ) ani thumb (nafa) fila bɛɛ cogoya bɛ cogo kelen na navigatɛriw kɔnɔ. Komin Firefox dɔrɔn de bɛ dɛmɛ Dòn u ka fɔlisen “falen” na ka Bɔ bolokɔnincinin kinin fɛ walima kinin fɛ k’a Kɛ fɛɛrɛ ye walasa ka ɲɛtaa jira ɲɛ na, an t’a Dɛmɛ sisan.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">A jɔ la
A bɛ disabledboolean attribut (boli) fara donnafɛn dɔ kan walasa k’a kɛ a ɲɛ ye min bɛ kɛ ni gri ye ani ka pointer events (fɔlikan) ko kɛlenw bɔ yen.
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>Min ani max
Range inputs bɛ ni implicit values ye minani max— 0ani 100, o cogo la. Aw bɛ se ka nafa kuraw jira minnu bɛ baara kɛ ni minani maxfɛnw ye.
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">Taabolo minnu bɛ kɛ
Ka da a kan, range inputs “snap” ka kɛ integer values ye. Walasa ka nin fɛn caman Changer, aw bɛ se ka stepnafa dɔ jira. Misali min bɛ duguma, an bɛ taabolo hakɛ caya siɲɛ fila ni baara kɛli ye ni 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 ye
Yɛlɛma-yɛlɛmaw
$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;