रेंज
लगातार क्रॉस-ब्राउजर स्टाइलिंग आ बिल्ट-इन कस्टमाइजेशन खातिर हमनी के कस्टम रेंज इनपुट के इस्तेमाल करीं।
अवलोकन कइल जाव
के साथ कस्टम <input type="range">नियंत्रण बनाईं .form-range। ट्रैक (बैकग्राउंड) आ अंगूठा (मान) दुनों के स्टाइल अइसन बा कि ब्राउजर सभ में एकही लउके। चूंकि खाली फायरफॉक्स अपना ट्रैक के अंगूठा के बाईं भा दाईं ओर से प्रगति के दृष्टिगत रूप से बतावे के साधन का रूप में “भरे” के समर्थन करेला, एहसे हमनी का एह घरी एकर समर्थन नइखीं करत.
<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;