Moderní tvorba webových aplikací

O webu

Stylování <input type=range>

Jak docílit vlastního vzhledu range „slideru“.

7 minut

Formulářový prvek <input> dokáže s různými podobami atributu type nabývat různých podob.

Jedna z nich je i <input type=range>:

Výchozí vzhled se liší dle prohlížečů, ale vypadá nějak takto (Chrome, Firefox, Safari):

Výchozí vzhled inputu range

Range ve Firefoxu

Range v Safari

Vlastnost accent-color

V Chrome a Firefoxu, dokáže accent-color obarvit <input type=range>. V Safari bohužel ne.

Pokud stačí vzhled táhla sjednotit jen barveně se zbytkem stránky, může to být rychlé a snadné řešení.

Pokročilejší stylování

Nestačí-li tato drobná změna, existují další možnosti.

Pro Chrome a Safari jde použít následující selektory:

  • input[type=range]::-webkit-slider-thumb – style ukazatele

  • input[type=range]::-webkit-slider-runnable-track – styl pozadí

Podmínkou, aby stylování fungovalo je vypnout appearance:

input[type=range],
input[type=range]::-webkit-slider-runnable-track,
input[type=range]::-webkit-slider-thumb {
    appearance: none;
}

Výsledek potom může být následující:

Samostatná živá ukázka

Ukázka nefunguje ve Firefoxu, ten má pro stylování vlastní selektory:

  • input[type=range]::-moz-range-track

  • input[type=range]::-moz-range-thumb

Pozor, není možné je spojit dohromady. Pokus o něco jako:

input[type=range]::-moz-range-track,
input[type=range]::-webkit-slider-runnable-track {
}

Způsobí nefunkčnost v Chrome a Safari.

Řešení je tak kód zduplikovat nebo použít nějaký CSS preprocesor, co problém s duplicitou vyřeší.

Samostatná živá ukázka – funkční v Chrome, Firefoxu, Safari, Edge

Internet Explorer

Potřebujete-li řešit stylování i v IE, jde to tam přes další prefixované vlastnosti:

input[type=range]::-ms-track {}
input[type=range]::-ms-fill-lower {}
input[type=range]::-ms-fill-upper {}
input[type=range]::-ms-thumb {}

Další stylování

Ještě pár věcí jde vymáčknout z CSS pro stylování range:

Vertikální

Popisky

Přes <datalist> jde dodělat popisky:

Samostatná živá ukázka

Zdá se ale, že pokročilejší stylování obsahu v <datalist> není možné v Safari.

Shadow DOM

Pro stylování range (a i obecně) si doporučuji zapnout ve vývojářských nástrojích Shadow DOM.

Do nastavení se jde dostat klávesou F1 při otevřených DevTools.

Shadow DOM

Výsledek to má tento:

Zobrazení Shadow DOMu

JavaScript

Nestačí-li tyto možnosti stylování, nezbývá, než použít JS.

Doporučil bych v takovém případě vycházet z nativního <input type=range> a JavaScriptem pouze doplnit potřebnou funkcionalitu.

Možná se to nezdá, ale prvek range má poměrně dost funkcionality, kterou by bylo třeba doprogramovat. Focus, ovládání klávesnicí atd.

Osvědčené čistě JS řešení je noUiSlider:

noUiSlider

Docela zajímavě vypadá UI-Range, který se snaží většinu věcí řešit přes CSS.

UI-Range

Odkazy jinam

Související články

Jak „focusovat“ správně díky :focus-visible

Jak správně řešit označený (:focus) stav formulářových prvků.

4 minuty

Poskakování obsahu akčních tlačítek

Jak vyřešit problém s poskakováním obsahu, když se změní textace nebo tučnost tlačítka.

9 minut

Stylování <input type=number>

Jak stylovat <input> pro zadávání čísel.

7 minut

Odeslání formuláře tlačítkem mimo něj

Jak odeslat formulář tlačítkem, které je mimo formulář.

3 minuty

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025