පරාසය

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

මෙම පිටුවේ

දළ විශ්ලේෂණය

සමඟ අභිරුචි <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;