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