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

Minimum

atrybut min generowanego input type=range

Maksimum

100

gdy ≤ minimum, silnik podnosi je o krok

Krok

atrybut step; wartość ≤ 0 silnik zamienia na 1

Wartość domyślna

atrybut value — przycinana (clamp) do zakresu

Linie

Znaki

1 761

<!-- Generator kodu range slider: Opacity -->
<style>
.rs-field{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;max-width:520px}
.rs-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.rs-head-stack{flex-direction:column;align-items:flex-start}
.rs-label{font-weight:700}
.rs-value{font-weight:800}
input[type="range"]{width:100%}
input[type="range"]{background:linear-gradient(90deg,currentColor,currentColor) 0/0% 100% no-repeat}
</style>

<div class="rs-field">
  <div class="rs-head">
    <label class="rs-label" for="opacity">Opacity</label>
    <span class="rs-value" id="opacity-value">60%</span>
  </div>
  <input type="range" id="opacity" name="opacity" min="0" max="100" step="1" value="60" aria-label="Opacity" aria-valuemin="0" aria-valuemax="100">
</div>

<script>
(() => {
  const slider = document.getElementById('opacity');
  const out = document.getElementById('opacity-value');
  if (!slider || !out) return;

  const prefix = "";
  const unit = "%";
  const decimals = 0;

  const format = (v) => {
    const n = Number(v);
    if (!Number.isFinite(n)) return prefix + String(v) + unit;
    const s = decimals > 0 ? n.toFixed(decimals) : String(Math.round(n));
    return prefix + s + unit;
  };

  const paintFill = (v) => {
    const min = Number(slider.min);
    const max = Number(slider.max);
    if (!Number.isFinite(min) || !Number.isFinite(max) || max <= min) return;
    const pct = ((Number(v) - min) / (max - min)) * 100;
    slider.style.backgroundSize = (pct) + '% 100%';
  };

  const update = () => {
    out.textContent = format(slider.value);
    if (true) paintFill(slider.value);
  };

  slider.addEventListener('input', update);
  update();
})();
</script>

Ściąga: atrybuty generowanego suwaka

Wiersze odpowiadają dokładnie temu, co silnik wpisuje do generowanego kodu przy aktualnych ustawieniach formularza — łącznie z kompletnym znacznikiem input type=range na końcu.

Atrybuty input type=range generowane przez narzędzie
Element	W generowanym kodzie	Znaczenie
Znacznik	<input type="range">	natywny suwak przeglądarki — obsługa myszką, dotykiem i strzałkami bez własnego JS
id i name	id="opacity" name="opacity"	ID slidera z formularza; gdy puste, silnik buduje je z etykiety (np. Opacity → opacity, prefiks rs- gdy nie zaczyna się literą)
min	0	dolna granica zakresu
max	100	górna granica; gdy ≤ min, silnik podnosi ją o krok
step	1	skok wartości; ≤ 0 jest zamieniane na 1
value	60	wartość początkowa przycięta (clamp) do zakresu
aria-label	aria-label="Opacity"	etykieta dla czytników ekranu — bez niej suwak ogłasza tylko liczbę (opcja „Dostępność (ARIA)”)
aria-valuemin / aria-valuemax	aria-valuemin="0" aria-valuemax="100"	granice zakresu ogłaszane asystująco
Powiązanie JS	addEventListener('input') → #opacity-value	dołączony skrypt przepisuje format(slider.value) do <span> przy każdym ruchu suwaka i przy opcji „Wypełniony pasek” ustawia background-size w % zakresu
Przykład (z silnika)	<input type="range" id="opacity" name="opacity" min="0" max="100" step="1" value="60" aria-label="Opacity" aria-valuemin="0" aria-valuemax="100">	kompletny znacznik wygenerowany przez silnik dla bieżących ustawień

Dołączony skrypt aktualizuje treść elementu #id-value na zdarzenie input (formatowanie z prefiksem, jednostką i miejscami dziesiętnymi) oraz ustawia background-size suwaka w procentach zakresu, gdy włączony jest „Wypełniony pasek”. Znacznik <output> zamiast <span> dodaje semantyczne powiązanie wyniku z kontrolką (atrybut for).

Warto wiedzieć — suwak zakresu w praktyce

Dostępność to nie dodatek

Natywny input type=range obsługuje strzałki, Home/End i Page Up/Down, ale czytnik ekranu bez aria-label ogłosi samą liczbę — nie wiadomo, co użytkownik ustawia. Włączona opcja ARIA dokłada też aria-valuemin/max, choć granice wynikają z atrybutów min/max.

Przeglądarka pilnuje zakresu

min, max i step są egzekwowane przez przeglądarkę: wartość poza zakresem jest przycinana, a niedozwolona zaokrąglana do kroku. Skrypt z generatora nie ustawia wartości — tylko czyta slider.value i formatuje widok, więc nie da się nim „zgubić” walidacji.

Wypełniony pasek to trick CSS

Kolorowy fragment toru to background: linear-gradient(…) z background-size ustawianym w procentach: (value − min) / (max − min) × 100. Alternatywą bez JS jest accent-color, ale daje mniejszą kontrolę nad wyglądem suwaka.

Etykieta, ID i powiązanie

label for=id kieruje kliknięcie w suwak, a output for=id semantycznie wiąże wynik z kontrolką. Gdy pole „ID slidera” zostanie puste, silnik zbuduje ID z etykiety (polskie znaki → myślniki, prefiks rs-, gdy wynik nie zaczyna się literą) — ID jest też name pola w formularzu.

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.