DARMOWE NARZĘDZIE

Generator Range Slider Output

Generuj interaktywny suwak zakresu HTML (<input type="range">) z wyświetlaniem bieżącej wartości. Kopiuj gotowy kod HTML/CSS/JS. Profesjonalne narzędzie online, które działa w Twojej przeglądarce. Szybko, bezpiecznie i bez instalowania zbędnego oprogramowania.

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

Decimals

Layout

Tryb

Value tag

Dane wejściowe

7 znaków

Slider id

Min

Max

Step

Value

Prefix

Unit

Checkbox Opcja narzędzia

Fill Opcja narzędzia

A11y Opcja narzędzia

Wynik

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

Powiązane narzędzia

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

Generator suwaka zakresu HTML online

Suwak zakresu (range slider) to popularny element formularzy dla wartości numerycznych. Generator tworzy pełny kod HTML/CSS/JS z podglądem aktualnej wartości i customizacją wyglądu.

range slider HTML input range suwak wartości JavaScript slider

Parametry suwaka

Min, max, krok (step), wartość domyślna, orientacja (pozioma/pionowa), etykiety (tylko min/max, wszystkie kroki, custom), wyświetlanie wartości (tooltip, badge, inline, none).

Stylizacja CSS

Kolor paska, kolor wypełnienia (fill do aktualnej wartości), rozmiar i kolor kciuka (thumb), zaokrąglenie, gradient paska – pełna customizacja przez CSS variables.

Najczęstsze pytania

Jak wyświetlić aktualną wartość?

50 – natywne rozwiązanie HTML.

Czy mogę mieć suwak z dwoma uchwytami (range)?

Dwa zachodzące na siebie input[type=range] z JS pozycjonowaniem lub biblioteka (noUiSlider, Slider.js). Generator obsługuje oba uchwyty.

Jak stylizować thumb w CSS?

input[type=range]::-webkit-slider-thumb { width: 20px; height: 20px; background: #4CAF50; border-radius: 50%; cursor: pointer; }

Inne generatory kodu: generator komponentu React i edytor CSS Flexbox.