[HTML] Jak zrobić suwak?
W HTML5 nie ma problemu z tworzeniem suwaków, a co więcej nie trzeba używać do tego żadnych bibliotek JavaScript czy CSS.
W celu utworzenia suwaka, posłużyć się należy znacznikiem input range.
Przykład 1
<label for="volume">Głośność</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50" step="10" />
Jak widzisz, stworzenie suwaka jest bardzo proste. W przykładzie powyżej użyte zostały dodatkowe atrybuty: min, max, step i value. W atrybucie min ustawiamy minimalną wartość dla suwaka, w atrybucie max - wiadomo. Atrybut step zawiera wartość kroków o jakie ma przeskakiwać suwak. Chyba o value nie muszę pisać. Oczywiście atrybuty te są opcjonalne i można ich pominąć.
W powyższym przykładzie suwak będzie przesuwał się po linii poziomej, ale można również ustawić go w pozycję pionową. Aby to zrobić, należy użyć następującej reguły CSS:
input[type="range"] {
appearance: slider-vertical;
}
Komentarze
Prześlij komentarz
Dzięki za komentarz!