मुख्य सामग्रीमा जानुहोस् कागजात नेभिगेसनमा जानुहोस्
in English

दायरा

लगातार क्रस-ब्राउजर स्टाइल र निर्मित अनुकूलनको लागि हाम्रो अनुकूलन दायरा इनपुटहरू प्रयोग गर्नुहोस्।

यस पृष्ठमा

अवलोकन

सँग अनुकूलन <input type="range">नियन्त्रणहरू सिर्जना गर्नुहोस् .form-range। ट्र्याक (पृष्ठभूमि) र थम्ब (मान) दुबै ब्राउजरहरूमा समान देखिन स्टाइल गरिएको छ। केवल Firefox ले तिनीहरूको ट्र्याकलाई औंठाको बायाँ वा दायाँबाट "भर्न" लाई दृश्य रूपमा प्रगति संकेत गर्ने माध्यमको रूपमा समर्थन गर्दछ, हामी हाल यसलाई समर्थन गर्दैनौं।

<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;