Tworzę stronę internetową, na której chcę użyć suwaka zakresu (wiem, że obsługuje tylko przeglądarki webkit).
W pełni to zintegrowałem i działa dobrze. Ale chciałbym użyć a, textbox
aby pokazać bieżącą wartość slajdu.
Chodzi mi o to, że początkowo suwak ma wartość 5, więc w polu tekstowym powinien wyświetlać się jako 5, kiedy przesuwam wartość w polu tekstowym, powinna się zmienić.
Czy mogę to zrobić, używając tylko CSS
lub html
. Chcę tego uniknąć JQuery
. Czy to możliwe?
:before
/:after
,content
iattr()
, w ten sposób . Jednak pseudoelementy: before /: after faktycznie pochłaniają część zakresu suwaka (chociaż może to naprawić), a co najważniejsze, wartości nie są aktualizowane, jeśli suwak jest manipulowany. Niemniej jednak pomyślałem, że byłoby interesujące zostawić to tutaj. Może się to stać możliwe w przyszłości.Odpowiedzi:
Używa javascript, a nie bezpośrednio jquery. To może pomóc Ci zacząć.
źródło
code
<label for = "rangeinput"> Zakres </label> <input id = "rangeinput" type = "range" min = "0" max = "10" value = "5" onchange = "rangevalue.value = value"> </input> <output id = "rangevalue"> 5 </output>Dla tych, którzy wciąż szukają rozwiązania bez osobnego kodu javascript. Niewiele jest łatwych rozwiązań bez pisania funkcji javascript lub jquery:
JsFiddle Demo
Jeśli chcesz wyświetlić wartość w polu tekstowym, po prostu zmień wyjście na wejście.
Aktualizacja:
Użyj identyfikatora lub nazwy elementu, oba są obsługiwane w przeglądarkach Morden.
źródło
wersja z edytowalnym wejściem:
http://jsfiddle.net/Xjxe6/
źródło
this.nextElementSibling
lubthis.previousElementSibling
i zamień oninput na onchange, aby uzyskać wersję działającą poza formularzem. jsfiddle.net/Xjxe6/94jeszcze lepszym sposobem byłoby przechwycenie zdarzenia wejściowego na samym wejściu, a nie na całej formie (z punktu widzenia wydajności):
Oto skrzypce (
id
dodane zgodnie z komentarzem Ryana).źródło
id="amount"
również danych wyjściowych.oninput="this.form.amount.value=this.value"
Jeśli chcesz, aby Twoja bieżąca wartość była wyświetlana pod suwakiem i poruszała się wraz z nią, spróbuj tego:
Zwróć uwagę, że ten typ elementu wejściowego HTML ma jedną ukrytą funkcję, na przykład możesz przesuwać suwak za pomocą klawiszy strzałek w lewo / w prawo / w dół / w górę, gdy element jest na nim aktywny. To samo z klawiszami Home / End / PageDown / PageUp.
źródło
Jeśli używasz wielu slajdów i możesz używać jQuery, możesz wykonać następujące czynności, aby łatwo radzić sobie z wieloma suwakami:
Ponadto, używając
oninput
na<input type='range'>
, otrzymasz zdarzenia podczas przeciągania zakresu.źródło
Najkrótsza wersja bez
form
,min
lub zewnętrzny JavaScript.źródło
Dla ludzi, którym nie zależy na używaniu jquery, oto krótka droga bez użycia id
źródło
Mam rozwiązanie, które wykorzystuje (Vanilla) JavaScript, ale tylko jako bibliotekę. Przyzwyczaisz się to raz dołączyć, a potem wszystko, co musisz zrobić, to ustawić odpowiedni
source
atrybut wejściowych liczb.source
Atrybut powinien byćquerySelectorAll
selektor wejścia Zakres chcesz słuchać.Działa nawet z selectcs. Działa z wieloma słuchaczami. I to działa w drugą stronę: zmień wejście numeryczne, a wejście zakresu dostosuje się. I będzie działać na elementach dodanych później na stronie (sprawdź https://codepen.io/HerrSerker/pen/JzaVQg )
Przetestowano w Chrome, Firefox, Edge i IE11
źródło
źródło
Spróbuj tego :
oraz w sekcji jQuery :
źródło
jeśli nadal szukasz odpowiedzi, możesz użyć input type = "number" zamiast type = "range" min max praca jeśli ustawiono w tej kolejności:
1-nazwa
2-maxlength
3-size
4-min
5-max
tylko skopiuj to
źródło