रेंज
लगातार क्रॉस-ब्राउजर स्टाइलिंग आ बिल्ट-इन कस्टमाइजेशन खातिर हमनी के कस्टम रेंज इनपुट के इस्तेमाल करीं।
अवलोकन कइल जाव
के साथ कस्टम <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
के इस्तेमाल करे वाला लोग खातिर आप नया मान निर्दिष्ट क सकत बानी ।min
max
<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;