පරාසය
ස්ථාවර හරස් බ්රවුසර හැඩගැන්වීම් සහ බිල්ට් අභිරුචිකරණය සඳහා අපගේ අභිරුචි පරාසයේ යෙදවුම් භාවිතා කරන්න.
දළ විශ්ලේෂණය
සමඟ අභිරුචි <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;