• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

type="range" - stylowanie

Object Storage Arubacloud
0 głosów
414 wizyt
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ź

+1 głos
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.
komentarz 28 maja 2018 przez shy_fox Gaduła (4,320 p.)
https://jsfiddle.net/Xevrrer/989mLw9q/

 

Takie coś?

Zamiast "change" użyj coś co wykrywa myszke, interwał lub Timer
komentarz 28 maja 2018 przez shy_fox Gaduła (4,320 p.)

W pierwszej linijce daj

$('.main-range').mousemove(function(){

 

I będzie śmigać

komentarz 28 maja 2018 przez shy_fox Gaduła (4,320 p.)
komentarz 29 maja 2018 przez marcolo Obywatel (1,530 p.)
Tak, o to mi chodziło, niestety został użyty JS, a my jakoś się nie lubimy :D

A da radę pozbyć się z tego jQuery, czy nie mam co próbować?

Podobne pytania

0 głosów
1 odpowiedź 607 wizyt
pytanie zadane 8 maja 2018 w HTML i CSS przez matizuu Obywatel (1,100 p.)
0 głosów
3 odpowiedzi 1,418 wizyt
0 głosów
1 odpowiedź 163 wizyt
pytanie zadane 27 grudnia 2019 w JavaScript przez Kolberg Obywatel (1,560 p.)

92,681 zapytań

141,583 odpowiedzi

320,070 komentarzy

62,041 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...