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