શ્રેણી

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

આ પૃષ્ઠ પર

ઝાંખી

સાથે કસ્ટમ <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અને 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;