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