Yerel aralık girişini kullanma
<div> öğeleri veya özel işaretçi işleyicilerle bir kaydırma çubuğunu yeniden oluşturmak yerine etiketli bir <input type="range"> kullanın. Yerel kontrol; klavye ve işaretçi etkileşimini, dokunma davranışını ve erişilebilirlik desteğini korur. Kullanım alanı için min, max, step ve value ayarlarını yapılandırın.
<label for="range-slider">Volume</label>
<input type="range" id="range-slider" value="70"/>
Değer için biçimlendirilmiş bir etiket veya birim gerekiyorsa bunu normal DOM içeriğinde gösterin ve değiştiğinde aria-valuetext değerini güncelleyin. Form kontrollerinde oluşturulan içerik birlikte çalışabilir olmadığından kaydırma çubuğu sözde öğelerinde ::before veya ::after kullanmayın. Kaydırma çubuğunu takip eden bir ipucu gerekiyorsa CSS sabitleme konumlandırmasıyla ipucunu kaydırma çubuğuna sabitleyin. Çevrildiğinde doğru şekilde yönlendirilen ipuçları için Konuma Duyarlı İpuçları başlıklı makaleyi inceleyin.
Stil yaklaşımını seçme
Basit renk özelleştirmesi için Markayla Tutarlı Formlar'ı kullanın ve tarayıcının yerel oluşturma özelliğini koruyun:
input[type="range"] {
accent-color: var(--brand-color);
}
accent-color, eksiksiz bir kaydırma çubuğu stil API'si değildir. Kaydırma çubuğu, kaydırma çubuğu yolu ve dolgu üzerindeki etkisi kullanıcı aracısına bağlıdır. İz, kaydırma çubuğu, boyutlar, şekil veya dolgu kontrol edilmesi gerektiğinde aşağıdaki sözde öğeleri kullanın.
Yolu ve kaydırma çubuğunu biçimlendirme
appearance: none, margin: 0 ve border: 0 ile varsayılan işletim sistemi stilini sıfırlayın. Tarayıcılar arası oluşturmayı normalleştirmek için WebKit ve Firefox sözde öğelerini ayrı kural bloklarında tanımlayın ve margin-block-start: calc((var(--slider-track-size) - var(--slider-thumb-size)) / 2) kullanarak WebKit kaydırma çubuğunu ortalayın (Firefox, kaydırma çubuğunu otomatik olarak ortalar). Temaların doğrudan sözde öğeleri hedeflememesi için tüketiciye yönelik değerleri girişte özel özellikler olarak tutun.
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);
}
Yerel görünümü kaldırdıktan sonra her zaman görünür bir klavye odağı göstergesi sağlayın. Yalnızca renk kullanmayın:
input[type="range"]:focus-visible {
outline: 2px solid var(--slider-fill-color);
outline-offset: 4px;
}
Etkin parçayı düzenleme
Parçanın doldurulmuş kısmı, doldurulmamış parçadan farklı şekilde stillendirildiğinde Firefox bunu ::-moz-range-progress aracılığıyla gösterir. WebKit/Blink eşdeğer bir sözde öğe sağlamaz. Bu nedenle, canlı giriş değerini input etkinliklerinde --control-value ile senkronize edin:
const slider = document.querySelector('#range-slider');
function syncSliderValue() {
slider.style.setProperty('--control-value', slider.value);
}
syncSliderValue();
slider.addEventListener('input', syncSliderValue);
Sınırlamalar
- WebKit ve Firefox sözde seçicilerini virgülle ayrılmış tek bir listede birleştirmeyin (ör.
::-webkit-slider-thumb, ::-moz-range-thumb). Tarayıcılar, tanınmayan bir tedarikçi sözde öğesiyle karşılaşırsa kuralın tamamını bırakır.
Yedekler
Vurgu rengi için yedekler ve tarayıcı desteği
accent-color özelliği, progresif geliştirmedir.
Bu özelliği desteklemeyen tarayıcılar, özelliği yok sayar ve varsayılan kullanıcı arayüzü renklerini kullanır.
progress() ve attr() için yedekler ve tarayıcı desteği
progress() desteklenmediğinde --slider-progress değerini calc() ile hesaplayın:
@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%
);
}
}
Yazılan attr() desteklenmediğinde JavaScript'te girişin min ve max özelliklerinden --attr-min ve --attr-max değerlerini senkronize edin:
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);
}