شريط تمرير للنطاق متّسق مع العلامة التجارية

ميزات الويب: 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 ليست واجهة برمجة تطبيقات كاملة لتصميم شريط التمرير. ويعتمد تأثيرها في شريط التمرير والمسار والتعبئة على وكيل المستخدم. استخدِم العناصر الزائفة أدناه عندما يكون من الضروري التحكّم في المسار أو شريط التمرير أو الأبعاد أو الشكل أو التعبئة.

تنسيق المسار والمقبض

يمكنك إعادة ضبط النمط التلقائي لنظام التشغيل باستخدام appearance: none وmargin: 0 وborder: 0. لجعل العرض متسقًا على جميع المتصفحات، يجب تعريف العناصر الزائفة الخاصة بـ WebKit وFirefox في كتل قواعد منفصلة، وتوسيط شريط التمرير في WebKit باستخدام margin-block-start: calc((var(--slider-track-size) - var(--slider-thumb-size)) / 2) (يقوم Firefox بتوسيط شريط التمرير تلقائيًا). يجب الاحتفاظ بالقيم المُوجَّهة للمستهلكين كخصائص مخصّصة في الإدخال حتى لا تستهدف المظاهر العناصر الزائفة مباشرةً.

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 هي تحسين تدريجي. وستتجاهل المتصفّحات التي لا تتوافق مع هذه السمة هذه السمة وتستخدم ألوان واجهة المستخدم التلقائية.

الخيارات الاحتياطية وتوافق المتصفّح مع 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);
}