ಶ್ರೇಣಿ
ಸ್ಥಿರವಾದ ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಸ್ಟೈಲಿಂಗ್ ಮತ್ತು ಅಂತರ್ನಿರ್ಮಿತ ಗ್ರಾಹಕೀಕರಣಕ್ಕಾಗಿ ನಮ್ಮ ಕಸ್ಟಮ್ ಶ್ರೇಣಿಯ ಇನ್ಪುಟ್ಗಳನ್ನು ಬಳಸಿ.
ಅವಲೋಕನ
ಜೊತೆಗೆ ಕಸ್ಟಮ್ <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;