सीमा

लगातार क्रॉस-ब्राउज़र स्टाइलिंग और बिल्ट-इन कस्टमाइज़ेशन के लिए हमारे कस्टम रेंज इनपुट का उपयोग करें।

इस पृष्ठ पर

अवलोकन

के साथ कस्टम <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;