[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

Popular

[C++] Jak obliczyć pole i obwód trapezu?

[HTML] Jak wyśrodkować tekst?

[PHP] Jak pobrać adres strony?