പരിധി
സ്ഥിരമായ ക്രോസ്-ബ്രൗസർ സ്റ്റൈലിംഗിനും ബിൽറ്റ്-ഇൻ ഇഷ്‌ടാനുസൃതമാക്കലിനും ഞങ്ങളുടെ ഇഷ്‌ടാനുസൃത ശ്രേണി ഇൻപുട്ടുകൾ ഉപയോഗിക്കുക.
അവലോകനം
ഉപയോഗിച്ച് ഇഷ്‌ടാനുസൃത <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;