ꯆꯥꯡ
ꯂꯦꯞꯇꯅꯥ ꯀ꯭ꯔꯣꯁ-ꯕ꯭ꯔꯥꯎꯖꯔ ꯁ꯭ꯇꯥꯏꯂꯤꯡ ꯑꯃꯁꯨꯡ ꯕꯤꯜꯇ-ꯏꯟ ꯀꯁ꯭ꯇꯃꯔꯥꯏꯖꯦꯁꯟꯒꯤꯗꯃꯛ ꯑꯩꯈꯣꯌꯒꯤ ꯀꯁ꯭ꯇꯝ ꯔꯦꯟꯖ ꯏꯅꯄꯨꯠꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫
ꯑꯣꯚꯔꯚꯤꯌꯨ ꯇꯧꯕꯥ꯫
ꯂꯣꯌꯅꯅꯥ ꯀꯁ꯭ꯇꯝ <input type="range">ꯀꯟꯠꯔꯣꯂꯁꯤꯡ ꯁꯦꯃꯒꯠꯄꯥ .form-range. ꯇ꯭ꯔꯦꯛ (ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ) ꯑꯃꯁꯨꯡ ꯊꯨꯝ (ꯚꯦꯜꯌꯨ) ꯑꯅꯤꯃꯛ ꯕ꯭ꯔꯥꯎꯖꯔ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯎꯕꯥ ꯐꯪꯅꯕꯥ ꯁ꯭ꯇꯥꯏꯜ ꯇꯧꯏ꯫ ꯐꯥꯏꯔꯐꯛꯁ ꯈꯛꯇꯅꯥ ꯄ꯭ꯔꯣꯒ꯭ꯔꯦꯁ ꯑꯗꯨ ꯚꯤꯖꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯇꯥꯛꯅꯕꯒꯤ ꯄꯥꯝꯕꯩ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯊꯨꯃꯍꯠꯂꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯑꯔꯥꯞꯄꯗꯒꯤ ꯃꯈꯣꯌꯒꯤ ꯇ꯭ꯔꯦꯛ ꯑꯗꯨ “ꯐꯤꯜ ꯇꯧꯕꯥ” ꯁꯄꯣꯔꯠ ꯇꯧꯕꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ, ꯑꯩꯈꯣꯌꯅꯥ ꯍꯧꯖꯤꯛ ꯃꯁꯤ ꯁꯄꯣꯔꯠ ꯇꯧꯗꯦ꯫
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">ꯌꯥꯍꯟꯗ꯭ꯔꯕ
disabledꯏꯅꯄꯨꯠ ꯑꯃꯗꯥ ꯕꯨꯂꯦꯇꯤꯟ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯒ꯭ꯔꯦ ꯑꯥꯎꯠ ꯃꯑꯣꯡ ꯑꯃꯥ ꯄꯤꯅꯕꯥ, ꯄꯣꯏꯟꯇꯔꯒꯤ ꯊꯧꯗꯣꯀꯁꯤꯡ ꯂꯧꯊꯣꯛꯅꯕꯥ, ꯑꯃꯁꯨꯡ ꯐꯣꯀꯁ ꯇꯧꯕꯥ ꯊꯤꯡꯅꯕꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ .
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>ꯃꯤꯟ ꯑꯃꯁꯨꯡ ꯃꯦꯛꯁ
ꯔꯦꯟꯖ ꯏꯅꯄꯨꯠꯁꯤꯡꯗꯥ ꯃꯊꯪꯁꯤꯠꯅꯥ minꯑꯃꯁꯨꯡ max— 0ꯑꯃꯁꯨꯡ ,ꯒꯤꯗꯃꯛ ꯏꯝꯞꯂꯤꯁꯤꯠ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯂꯩ꯫ ꯑꯃꯁꯨꯡ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ 100ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯃꯤꯑꯣꯏꯁꯤꯡꯒꯤꯗꯃꯛ ꯅꯍꯥꯛꯅꯥ ꯑꯅꯧꯕꯥ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯇꯥꯀꯄꯥ ꯌꯥꯏ꯫minmax
<label for="customRange2" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">ꯈꯣꯡꯊꯥꯡꯁꯤꯡ꯫
ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ, ꯔꯦꯟꯖ ꯏꯅꯄꯨꯠꯁꯤꯡꯅꯥ ꯏꯟꯇꯤꯖꯔ ꯚꯦꯜꯌꯨꯁꯤꯡꯗꯥ “ꯁ꯭ꯅꯦꯞ” ꯇꯧꯏ꯫ ꯃꯁꯤ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ, ꯅꯍꯥꯛꯅꯥ stepꯚꯦꯜꯌꯨ ꯑꯃꯥ ꯇꯥꯀꯄꯥ ꯌꯥꯏ꯫ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯈꯨꯗꯝ ꯑꯁꯤꯗꯥ ꯑꯩꯈꯣꯌꯅꯥ 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">ꯁꯥꯁꯁ ꯇꯧꯕꯥ꯫
ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫
$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;