पल्लो
सुसंगत क्रॉस-ब्राउझर स्टायलिंग आनी बिल्ट-इन सानुकूलीकरणा खातीर आमचीं सानुकूल श्रेणी इनपुट वापरात.
नियाळ
च्या आदारान सानुकूल <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;