type="range" - stylowanie

pytanie zadane 28 maja 2018 w HTML i CSS przez marcolo Obywatel (1,530 p.)

Przeglądam sobie różne tricki, dotyczące stylowania inputów, i tak sobie wymyśliłem, i nie znalazłem takiej opcji.

Czy w input type="range" mogę zrobić, po prawej od wskaźnika czerwony kolor, jako obszar niezaznaczony a w lewo, np. niebieski, jako obszar już zaznaczony?

1 odpowiedź

odpowiedź 28 maja 2018 przez shy_fox Gaduła (4,320 p.)

    -webkit-appearance: none; 
    background: linear-gradient(to right,#ffb493,#9bff84); // kolor tla, gradient
    outline: 0;

zamiast #ff... podaj swoje kolory, o takie coś ci chodzi? kod dodaj do klasy którą nadaj inputowi

komentarz 28 maja 2018 przez marcolo Obywatel (1,530 p.)

Nie, to tylko narzuci mi gradient, ale przesuwanie suwaka, nic nie będzie robiło, a mi chodzi o to, że nieważne gdzie znajdzie się wskażnik, będą różne kolory po jego prawej i lewej stronie.

Przesuwając suwakiem, kolor po lewej sugerujący zaznaczenie miałby zasłaniać kolor po prawej. Gdy suwak znajdzie się przy skrajnej prawej krawędzi będzie tylko kolor niebieski, i analogicznie wskaźnik całkowicie po lewej stronie, kolor czerwony.