Εύρος
Χρησιμοποιήστε τις εισαγωγές προσαρμοσμένου εύρους για σταθερό στυλ μεταξύ προγραμμάτων περιήγησης και ενσωματωμένη προσαρμογή.
ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ
Δημιουργήστε προσαρμοσμένα <input type="range">στοιχεία ελέγχου με .form-range. Το κομμάτι (το φόντο) και ο αντίχειρας (η τιμή) έχουν και τα δύο στιλ ώστε να εμφανίζονται το ίδιο στα προγράμματα περιήγησης. Καθώς μόνο ο Firefox υποστηρίζει το «γέμισμα» του ίχνους του από τα αριστερά ή τα δεξιά του αντίχειρα ως μέσο οπτικής ένδειξης της προόδου, προς το παρόν δεν το υποστηρίζουμε.
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">άτομα με ειδικές ανάγκες
Προσθέστε το disabledχαρακτηριστικό boolean σε μια είσοδο για να του δώσετε μια γκρι εμφάνιση και να αφαιρέσετε συμβάντα δείκτη.
<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">Sass
Μεταβλητές
$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;