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

input type="range"

VPS Starter Arubacloud
0 głosów
610 wizyt
pytanie zadane 8 maja 2018 w HTML i CSS przez matizuu Obywatel (1,100 p.)
Mam inputa type range, jak jak wypisać gdzieś obok reprezentację liczbową tego suwaka, która będzie się zmieniała wraz z przesuwaniem suwaka?

1 odpowiedź

+2 głosów
odpowiedź 8 maja 2018 przez cz3ran Stary wyjadacz (13,380 p.)
wybrane 8 maja 2018 przez matizuu
 
Najlepsza

Musisz użyć do tego JS. Najpierw nadajesz id inputowi typu range:

<input type='range' id='range'>

Następnie pobierasz go dzięk funkcji getElementById

var range = document.getElementById('range');

Zmienna range posiada pole value, które reprezentuje wartość inputa:

range.value

Następnie jeżeli chcesz uzyskać efekt pokazywania widoku "na bierząco", musisz wypisywać gdzieś tą wartość na evencie oninput:

range.oninput = () => {
    setValue();
};

Tutaj masz przykładową implementację takie suwaczka:

https://codepen.io/Czeran/pen/PeEqJW?editors=1111

Podobne pytania

0 głosów
1 odpowiedź 425 wizyt
pytanie zadane 28 maja 2018 w HTML i CSS przez marcolo Obywatel (1,530 p.)
0 głosów
3 odpowiedzi 1,442 wizyt
0 głosów
1 odpowiedź 165 wizyt
pytanie zadane 27 grudnia 2019 w JavaScript przez Kolberg Obywatel (1,560 p.)

92,768 zapytań

141,695 odpowiedzi

320,510 komentarzy

62,106 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!

...