ꯆꯥꯡ
ꯂꯦꯞꯇꯅꯥ ꯀ꯭ꯔꯣꯁ-ꯕ꯭ꯔꯥꯎꯖꯔ ꯁ꯭ꯇꯥꯏꯂꯤꯡ ꯑꯃꯁꯨꯡ ꯕꯤꯜꯇ-ꯏꯟ ꯀꯁ꯭ꯇꯃꯔꯥꯏꯖꯦꯁꯟꯒꯤꯗꯃꯛ ꯑꯩꯈꯣꯌꯒꯤ ꯀꯁ꯭ꯇꯝ ꯔꯦꯟꯖ ꯏꯅꯄꯨꯠꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫
ꯑꯣꯚꯔꯚꯤꯌꯨ ꯇꯧꯕꯥ꯫
ꯂꯣꯌꯅꯅꯥ ꯀꯁ꯭ꯇꯝ <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
ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯃꯤꯑꯣꯏꯁꯤꯡꯒꯤꯗꯃꯛ ꯅꯍꯥꯛꯅꯥ ꯑꯅꯧꯕꯥ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯇꯥꯀꯄꯥ ꯌꯥꯏ꯫min
max
<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;