പരിധി

സ്ഥിരമായ ക്രോസ്-ബ്രൗസർ സ്റ്റൈലിംഗിനും ബിൽറ്റ്-ഇൻ ഇഷ്‌ടാനുസൃതമാക്കലിനും ഞങ്ങളുടെ ഇഷ്‌ടാനുസൃത ശ്രേണി ഇൻപുട്ടുകൾ ഉപയോഗിക്കുക.

ഈ പേജിൽ

അവലോകനം

ഉപയോഗിച്ച് ഇഷ്‌ടാനുസൃത <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;