ಶ್ರೇಣಿ

ಸ್ಥಿರವಾದ ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಸ್ಟೈಲಿಂಗ್ ಮತ್ತು ಅಂತರ್ನಿರ್ಮಿತ ಗ್ರಾಹಕೀಕರಣಕ್ಕಾಗಿ ನಮ್ಮ ಕಸ್ಟಮ್ ಶ್ರೇಣಿಯ ಇನ್‌ಪುಟ್‌ಗಳನ್ನು ಬಳಸಿ.

ಈ ಪುಟದಲ್ಲಿ

ಅವಲೋಕನ

ಜೊತೆಗೆ ಕಸ್ಟಮ್ <input type="range">ನಿಯಂತ್ರಣಗಳನ್ನು ರಚಿಸಿ .form-range. ಟ್ರ್ಯಾಕ್ (ಹಿನ್ನೆಲೆ) ಮತ್ತು ಹೆಬ್ಬೆರಳು (ಮೌಲ್ಯ) ಎರಡನ್ನೂ ಬ್ರೌಸರ್‌ಗಳಾದ್ಯಂತ ಒಂದೇ ರೀತಿ ಕಾಣುವಂತೆ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಪ್ರಗತಿಯನ್ನು ಸೂಚಿಸುವ ಸಾಧನವಾಗಿ ಫೈರ್‌ಫಾಕ್ಸ್ ಮಾತ್ರ ಹೆಬ್ಬೆರಳಿನ ಎಡ ಅಥವಾ ಬಲದಿಂದ ತಮ್ಮ ಟ್ರ್ಯಾಕ್ ಅನ್ನು "ಭರ್ತಿ ಮಾಡುವುದನ್ನು" ಬೆಂಬಲಿಸುತ್ತದೆ, ನಾವು ಪ್ರಸ್ತುತ ಅದನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ.

ಉದಾಹರಣೆ ಶ್ರೇಣಿ

html

<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">

ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ

disabledಇನ್‌ಪುಟ್‌ಗೆ ಬೂದುಬಣ್ಣದ ನೋಟವನ್ನು ನೀಡಲು, ಪಾಯಿಂಟರ್ ಈವೆಂಟ್‌ಗಳನ್ನು ತೆಗೆದುಹಾಕಲು ಮತ್ತು ಫೋಕಸ್ ಮಾಡುವುದನ್ನು ತಡೆಯಲು ಬೂಲಿಯನ್ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ .

ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾದ ಶ್ರೇಣಿ

html

<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>

ಕನಿಷ್ಠ ಮತ್ತು ಗರಿಷ್ಠ

ಶ್ರೇಣಿಯ ಇನ್‌ಪುಟ್‌ಗಳು ಅನುಕ್ರಮವಾಗಿ minಮತ್ತು max- 0ಮತ್ತು ಗಾಗಿ ಸೂಚ್ಯ ಮೌಲ್ಯಗಳನ್ನು ಹೊಂದಿವೆ. ಮತ್ತು ಗುಣಲಕ್ಷಣಗಳನ್ನು 100ಬಳಸುವವರಿಗೆ ನೀವು ಹೊಸ ಮೌಲ್ಯಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು .minmax

ಉದಾಹರಣೆ ಶ್ರೇಣಿ

html

<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".

ಉದಾಹರಣೆ ಶ್ರೇಣಿ

html

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