ප්‍රධාන අන්තර්ගතය වෙත යන්න ලේඛන සංචාලනය වෙත යන්න
Check
in English

පරාසය

ස්ථාවර හරස් බ්‍රවුසර හැඩගැන්වීම් සහ බිල්ට් අභිරුචිකරණය සඳහා අපගේ අභිරුචි පරාසයේ යෙදවුම් භාවිතා කරන්න.

දළ විශ්ලේෂණය

සමඟ අභිරුචි <input type="range">පාලන සාදන්න .form-range. ධාවන පථය (පසුබිම) සහ මාපටැඟිල්ල (අගය) දෙකම බ්‍රවුසර හරහා එකම ලෙස පෙනෙන ලෙස හැඩගස්වා ඇත. ප්‍රගතිය දෘශ්‍යමය වශයෙන් දැක්වීමේ මාධ්‍යයක් ලෙස ෆයර්ෆොක්ස් පමණක් ඔවුන්ගේ ධාවන පථය මාපටැඟිල්ලේ වම් හෝ දකුණේ සිට “පිරවීමට” සහය දක්වන බැවින්, අපි දැනට එයට සහාය නොදක්වමු.

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

ආබාධිතයි

disabledආදානයකට අළු පැහැති පෙනුමක් ලබා දීමට, දර්ශක සිදුවීම් ඉවත් කිරීමට සහ නාභිගත වීම වැලැක්වීමට බූලියන් ගුණාංගය එක් කරන්න .

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

අවම සහ උපරිම

minපරාස ආදාන වලට පිළිවෙලින් සහ max- 0සහ සඳහා ව්‍යංග අගයන් 100ඇත. minඔබට සහ maxඋපලක්ෂණ භාවිතා කරන අය සඳහා නව අගයන් නියම කළ හැක .

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

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

සාස්

විචල්යයන්

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