சரகம்

நிலையான குறுக்கு உலாவி ஸ்டைலிங் மற்றும் உள்ளமைக்கப்பட்ட தனிப்பயனாக்கலுக்கு எங்கள் தனிப்பயன் வரம்பு உள்ளீடுகளைப் பயன்படுத்தவும்.

இந்தப் பக்கத்தில்

கண்ணோட்டம்

உடன் தனிப்பயன் <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;