मुख्य सामग्रीवर जा डॉक्स नेव्हिगेशनवर जा
in English

श्रेणी

सातत्यपूर्ण क्रॉस-ब्राउझर शैली आणि अंगभूत कस्टमायझेशनसाठी आमचे सानुकूल श्रेणी इनपुट वापरा.

या पृष्ठावर

आढावा

सह सानुकूल <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;