[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" />

Efekt:

Głośność

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;
}

Suwak z użyciem jQuery UI

Aby tworzyć suwaki przy pomocy biblioteki jQuery UI musisz dołączyć ją oraz jQuery do kodu Twojej strony.

Kod JavaScript:

$('.slider').slider({

  animate: 'fast',
  step:10,
  min : 10,
  max : 100
  
});

W miejscu, gdzie ma być suwak wstaw kod HTML:

<div class="slider"></div>

Powyższy kod utworzy suwak z minimalną wartością 10 i maksymalną 100.

Efekt:

Aktualna wartość:

Wybrane opcje:

• animate - szybkość przesuwania: 'fast' lub 'slow';
• min - minimalna wartość;
• step - krok przesuwania;
• max - maksymalna wartość;
• value - początkowa wartość;
• orientation - orientacja 'horizontal' lub 'vertical';

Po więcej sprawdź dokumentację jQuery UI Slider.