Edytować: tl; dr Co mam jest.png plik poziomego paska i plik .png kwadratowego przycisku. Chcę móc dodać oba obrazy do strony internetowej i móc przesuwać przycisk wzdłuż prostokąta. Wiem, że możliwe jest tworzenie suwaków zasięgu w lepszy sposób, ale używanie plików .png jest trudnym zadaniem.
Zostałem poproszony o zrobienie zdjęcia suwaka zakresu, dodanie go do strony internetowej i uczynienie suwaka interaktywnym / przeciągalnym. Wiem, że jQuery ma własne suwaki (https://jqueryui.com/slider/#multiple-vertical), ale wydaje się, że nie ma to zastosowania, jeśli zamiast tego chcesz użyć obrazu suwaka zakresu.
Przykładowy obraz:
Jak to zrealizować? Wszystkie samouczki, które widzę, tworzą suwak z elementów HTML / CSS / JS, a ja mam oddzielne obrazy suwaka i przycisku przeciągania.
FYI, powodem, dla którego używamy obrazu, jest to, że wygląda lepiej niż standardowe suwaki dostarczane przez jQuery.
Odpowiedzi:
0 dla odpowiedzi № 1Pomocne może być wyszukanie "samouczka" lub "RangeSlider JS" zamiast suwaka, aby znaleźć samouczek.
Jednak nie widzę żadnego powodu, dla którego nie można tego osiągnąć łatwiej i bardziej dokładnie poprzez JS i CSS.
Jeśli masz problemy z wizualizacją, spróbujrozbijanie projektu na części takie jak to, i oszczędzaj sobie kłopotów z próbą stworzenia responsywnego projektu opartego na obrazie. (Jak wszyscy wcześniej zmagaliśmy się z problemami)
Sam przycisk suwaka jest zaokrąglonym kwadratem z trzema kwadratami w środku.
Pasek suwaka jest zaokrąglonym prostokątem z umieszczonymi w nim trzema innymi kwadratami.
Pole informacyjne to element div z tekstem i znakiem a Trójkąt CSS przymocowane do niego.
Same kleszcze są trudniejsze i trzeba je dodawać i usuwać dynamicznie za pomocą JS, w zależności od rozdzielczości, ale ich wizualne szczegóły wymagają jedynie podstawowej stylizacji
Jeśli nadal czujesz potrzebę korzystania z obrazów i przerywania reakcji witryny, to spójrz na niektóre kodeki i zobacz, co zrobili inni z podobnymi wymaganiami.