Generator suwaka zakresu HTML

Generuj interaktywny suwak zakresu HTML (<input type="range">) z wyświetlaniem bieżącej wartości. Kopiuj gotowy kod HTML/CSS/JS.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Miejsca dziesiętne 0

Układ

Tryb

Znacznik wartości

Dane wejściowe

7 znaków

ID slidera

Minimum

Maksimum

Krok

Wartość 60

Prefiks

Jednostka

Dołącz CSS Opcja narzędzia

Wypełniony pasek Opcja narzędzia

Dostępność (ARIA) Opcja narzędzia

Podgląd na żywo

Opacity 60%

Kod wynikowy

Ustaw parametry i kliknij „Przetwórz”, aby zobaczyć wynik.

Oceń to narzędzie:

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Generator suwaka zakresu HTML — customowy input range

Generator suwaka zakresu HTML tworzy w pełni konfigurowalne elementy input type="range" z customowym stylem CSS. Ustaw min, max, krok, kolor, rozmiar i etykiety — wygeneruj gotowy kod HTML/CSS/JavaScript do wklejenia w projekt.

Czym jest input type="range"?

Element HTML <input type="range"> to suwak (slider) umożliwiający użytkownikowi wybranie wartości z zakresu przez przeciągnięcie uchwytu. Podstawowe atrybuty: min — minimalna wartość (domyślnie 0), max — maksymalna wartość (domyślnie 100), step — krok zmiany wartości (domyślnie 1, może być decimal np. 0.1), value — bieżąca wartość (domyślnie: (max+min)/2). Dostęp do wartości przez JavaScript: document.getElementById('slider').value lub zdarzenie input. Natywny suwak wygląda różnie w każdej przeglądarce — CSS pozwala ujednolicić i skustomizować wygląd.

Stylizacja suwaka CSS — pseudoelementy

Suwak składa się z: track (ścieżka) — linia po której suwak się przesuwa, thumb (uchwyt) — kółko/kwadrat który użytkownik przeciąga. Pseudoelementy CSS dla różnych przeglądarek: ::-webkit-slider-thumb i ::-webkit-slider-runnable-track (Chrome, Safari, Edge), ::-moz-range-thumb i ::-moz-range-track (Firefox), ::-ms-thumb i ::-ms-track (IE — przestarzałe). Przykład stylizacji: input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #6366f1; cursor: pointer; }.

Podwójny suwak zakresu (range slider z dwoma uchwytami)

Natywny HTML nie obsługuje dwóch uchwytów — do filtrowania cenowego (min-max). Rozwiązania: dwa nakładające się inputy z JS kontrolującym min/max nawzajem, biblioteki: noUiSlider (darmowa, mała), ion.RangeSlider, Slider.js. Generator tworzy też wariant dwóch suwaków z JavaScript synchronizacją — gotowy do użycia kod bez zewnętrznych zależności dla prostych przypadków.

Suwak z tooltipem wartości

Wyświetlanie aktualnej wartości nad thumbem: CSS-only przez attr() (ograniczone wsparcie) lub JavaScript: slider.addEventListener('input', () => { tooltip.style.left = (slider.value-min)/(max-min) * 100 + '%'; tooltip.textContent = slider.value; });. Generator opcjonalnie dodaje tooltip wyświetlający wartość podczas przeciągania. Inny wariant: wyświetlenie wartości obok suwaka w elemencie <output> powiązanym przez for atrybut.

Najczęściej zadawane pytania

Jak wyświetlić aktualną wartość suwaka HTML?

<input type="range" id="vol" min="0" max="100" value="50" oninput="document.getElementById('val').textContent = this.value"> + <span id="val">50</span>. Lub z output: <input type="range" id="r" oninput="out.value = this.value"><output name="out" for="r">50</output>. Zdarzenie input aktualizuje w czasie rzeczywistym (podczas przeciągania), change — po puknięciu.

Jak zrobić suwak z krokiem dziesiętnym (float)?

<input type="range" min="0" max="1" step="0.01" value="0.5"> — krok 0.01, zakres 0–1. Dla cen: step="0.50" (co 50 groszy). Uwaga: value zwraca string, konwertuj na float: parseFloat(input.value). Dla kroków nieregularnych: użyj datalist z opcjami lub JavaScript snapping.

Jak zmienić kolor ścieżki suwaka zależnie od wartości?

Technika "filled track" (wypełniona część do aktualnej pozycji): const updateTrack = (input) => { const pct = (input.value - input.min) / (input.max - input.min) * 100; input.style.background = \`linear-gradient(to right, #6366f1 \${pct}%, #e2e8f0 \${pct}%)\`; }; slider.addEventListener('input', () => updateTrack(slider));. Generator automatycznie dodaje tę logikę gdy zaznaczysz opcję "filled track".

Jak obsłużyć dotyk (touch) dla suwaka na mobilnych urządzeniach?

Natywny input type="range" obsługuje touch automatycznie w iOS Safari i Android Chrome — nie wymaga dodatkowego kodu. Dla custom implementacji: Touch Events API lub Pointer Events API (nowszy, unifikuje mysz/dotyk/rysik). Upewnij się że thumb jest wystarczająco duży na dotyk: min. 44×44 px (WCAG 2.5.5) — ustaw szerokość/wysokość thumb w CSS co najmniej 44px.

Jakie biblioteki suwaków JavaScript polecasz?

noUiSlider — najlżejsza (14 KB), bez jQuery, CSS customizacja, dual handle, pełne API. Slider.js — minimalistyczna, zero dependencies. Rangeslider.js — jQuery plugin, prosty. Swiper — dla karuzel, niekoniecznie wartości. Dla React: react-slider, @radix-ui/react-slider (accessible, headless). Dla Angular: Angular Material MatSlider. Dla Vue: vue-slider-component. Generator tworzy suwaki bez zewnętrznych zależności — dla prostych przypadków wystarczy natywny HTML+CSS+JS.