મુખ્ય સામગ્રી પર જાઓ ડૉક્સ નેવિગેશન પર જાઓ
Check
in English

શ્રેણી

સતત ક્રોસ-બ્રાઉઝર સ્ટાઇલ અને બિલ્ટ-ઇન કસ્ટમાઇઝેશન માટે અમારા કસ્ટમ રેન્જ ઇનપુટ્સનો ઉપયોગ કરો.

ઝાંખી

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

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અને max0અને માટે ગર્ભિત મૂલ્યો ધરાવે 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;