पल्लो

सुसंगत क्रॉस-ब्राउझर स्टायलिंग आनी बिल्ट-इन सानुकूलीकरणा खातीर आमचीं सानुकूल श्रेणी इनपुट वापरात.

ह्या पानाचेर

नियाळ

च्या आदारान सानुकूल <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वापरपी लोकांखातीर तुमी नवी मोलां निर्देशीत करूंक शकतात .minmax

उदाहरण श्रेणी

<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;