શ્રેણી
સતત ક્રોસ-બ્રાઉઝર સ્ટાઇલ અને બિલ્ટ-ઇન કસ્ટમાઇઝેશન માટે અમારા કસ્ટમ રેન્જ ઇનપુટ્સનો ઉપયોગ કરો.
ઝાંખી
સાથે કસ્ટમ <input type="range">
નિયંત્રણો બનાવો .form-range
. ટ્રેક (બેકગ્રાઉન્ડ) અને અંગૂઠો (મૂલ્ય) બંને બ્રાઉઝર્સમાં સમાન દેખાવા માટે સ્ટાઈલ કરવામાં આવ્યા છે. જેમ કે માત્ર Firefox તેમના ટ્રૅકને અંગૂઠાની ડાબી કે જમણી બાજુથી "ફિલિંગ" ને દૃષ્ટિની પ્રગતિ દર્શાવવાના સાધન તરીકે સપોર્ટ કરે છે, અમે હાલમાં તેને સમર્થન આપતા નથી.
<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;