פס הזזה של טווח שתואם למותג

תכונות לאתרים: accent-color <input type="range"> appearance progress() attr() :dir()

שימוש בקלט טווח מקורי

השתמשו ברכיב <input type="range"> עם תווית במקום ליצור מחדש פס הזזה עם רכיבי <div> או פונקציות טיפול מותאמות אישית באירועי מצביע. הפקד המקורי שומר על האינטראקציה של המקלדת והמצביע, על התנהגות המגע ועל התמיכה בנגישות. מגדירים את min,‏ max,‏ step ו-value בהתאם לתרחיש לדוגמה.

<label for="range-slider">Volume</label>
<input type="range" id="range-slider" value="70"/>

אם הערך דורש תווית או יחידה בפורמט מסוים, צריך לחשוף אותו בתוכן DOM רגיל ולעדכן את aria-valuetext כשהוא משתנה. אל תשתמשו ב-::before או ב-::after ברכיבי פסאודו של פס הזזה, כי תוכן שנוצר בפקדי טפסים לא ניתן לפעולה הדדית. אם נדרש הסבר קצר שמוצמד ללחצן, צריך להצמיד אותו ללחצן באמצעות מיקום עוגן ב-CSS. במאמר הסברים קצרים שמותאמים למיקום מוסבר איך להגדיר הסברים קצרים ששומרים על הכיוון הנכון כשהם מתהפכים.

בחירת גישת העיצוב

כדי להתאים אישית את הצבעים בצורה פשוטה, משתמשים בטפסים שתואמים למיתוג ושומרים על העיבוד המקורי של הדפדפן:

input[type="range"] {
  accent-color: var(--brand-color);
}

‫accent-color הוא לא API מלא לעיצוב סליידר. ההשפעה שלו על הלחצן, המסילה והמילוי תלויה בסוכן המשתמש. כדי לשלוט במסילה, בידית, במידות, בצורה או במילוי, צריך להשתמש ברכיבי הפסאודו הבאים.

עיצוב המסילה והידית

איפוס סגנון ברירת המחדל של מערכת ההפעלה באמצעות appearance: none, margin: 0 ו-border: 0. כדי לנרמל את העיבוד בדפדפנים שונים, צריך להצהיר על רכיבי פסאודו של WebKit ו-Firefox בבלוקים נפרדים של כללים, ולמרכז את ה-thumb של WebKit באמצעות margin-block-start: calc((var(--slider-track-size) - var(--slider-thumb-size)) / 2) (Firefox ממקם את ה-thumb במרכז באופן אוטומטי). כדאי להשאיר את הערכים שמוצגים לצרכנים כמאפיינים מותאמים אישית בקלט, כדי שהעיצובים לא יטרגטו רכיבי פסאודו באופן ישיר.

input[type="range"] {
  --slider-track-size: 0.5rem;
  --slider-thumb-size: 1.25rem;
  --slider-track-radius: 999px;
  --slider-thumb-radius: 50%;
  --slider-track-color: #d9d9d9;
  --slider-fill-color: #06c;
  --slider-thumb-color: var(--slider-fill-color);
  --slider-direction: to right;

  /* reverse gradient direction for right-to-left layouts */
  &:dir(rtl) {
    --slider-direction: to left;
  }

  /* Read min and max from attributes; --control-value is synced by the script below. */
  --attr-min: attr(min type(<number>), 0);
  --attr-max: attr(max type(<number>), 100);
  --control-value: attr(value type(<number>), 50);
  --slider-progress: calc(
    progress(var(--control-value), var(--attr-min), var(--attr-max)) * 100%
  );

  appearance: none;
  inline-size: 100%;
  block-size: 2.5rem; /* Preserve a generous interaction area. */
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

/* WebKit/Blink. */
input[type="range"]::-webkit-slider-runnable-track {
  block-size: var(--slider-track-size);
  border: 0;
  border-radius: var(--slider-track-radius);
  background: linear-gradient(
    var(--slider-direction),
    var(--slider-fill-color) var(--slider-progress),
    var(--slider-track-color) var(--slider-progress)
  );
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  inline-size: var(--slider-thumb-size);
  block-size: var(--slider-thumb-size);
  margin-block-start: calc(
    (var(--slider-track-size) - var(--slider-thumb-size)) / 2
  );
  border: 0;
  border-radius: var(--slider-thumb-radius);
  background: var(--slider-thumb-color);
}

/* Firefox. */
input[type="range"]::-moz-range-track {
  block-size: var(--slider-track-size);
  border: 0;
  border-radius: var(--slider-track-radius);
  background: var(--slider-track-color);
}

input[type="range"]::-moz-range-progress {
  block-size: var(--slider-track-size);
  border-radius: var(--slider-track-radius);
  background: var(--slider-fill-color);
}

input[type="range"]::-moz-range-thumb {
  inline-size: var(--slider-thumb-size);
  block-size: var(--slider-thumb-size);
  border: 0;
  border-radius: var(--slider-thumb-radius);
  background: var(--slider-thumb-color);
}

תמיד צריך לספק אינדיקטור גלוי למיקוד המקלדת אחרי שמסירים את המראה המקורי. אל תשתמשו בצבע בלבד:

input[type="range"]:focus-visible {
  outline: 2px solid var(--slider-fill-color);
  outline-offset: 4px;
}

עיצוב המסלול הפעיל

כשהחלק המלא של המסלול מעוצב באופן שונה מהמסלול הלא מלא, דפדפן Firefox חושף אותו באמצעות ::-moz-range-progress. ‫WebKit/Blink לא מספקים רכיב פסאודו מקביל, אז צריך לסנכרן את ערך הקלט בזמן אמת עם --control-value באירועים של input:

const slider = document.querySelector('#range-slider');

function syncSliderValue() {
  slider.style.setProperty('--control-value', slider.value);
}

syncSliderValue();
slider.addEventListener('input', syncSliderValue);

מגבלות

  • אל תשלבו סלקטורים מדומים של WebKit ו-Firefox ברשימה מופרדת בפסיקים אחת (למשל ::-webkit-slider-thumb, ::-moz-range-thumb). דפדפנים מתעלמים מהכלל כולו אם הם נתקלים ברכיב מדומה של ספק לא מזוהה.

חלופות

תמיכה בדפדפן וחלופות ל-accent-color

המאפיין accent-color הוא שיפור הדרגתי (progressive enhancement). דפדפנים שלא תומכים במאפיין הזה יתעלמו ממנו וישתמשו בצבעי ברירת המחדל של ממשק המשתמש שלהם.

חלופות ותמיכה בדפדפן עבור progress() ו-attr()

כשאין תמיכה ב-progress(), מחשבים את --slider-progress באמצעות calc():

@supports not (opacity: progress(1, 0, 100)) {
  input[type="range"] {
    --slider-progress: calc(
      (var(--control-value) - var(--attr-min)) /
      (var(--attr-max) - var(--attr-min)) * 100%
    );
  }
}

אם סוג attr() לא נתמך, מסנכרנים את --attr-min ו---attr-max מהמאפיינים min ו-max של הקלט ב-JavaScript:

function syncSliderValue() {
  slider.style.setProperty('--attr-min', slider.min || 0);
  slider.style.setProperty('--attr-max', slider.max || 100);
  slider.style.setProperty('--control-value', slider.value);
}