XUL posiada dwa elementy stosowane do wprowadzenia wartości lub zakresów numerycznych oraz jako dwa elementy dla wprowadzenia dat i czasu. Te elementy są dostępne tylko w Firefoksie 3 lub wersjach późniejszych.
Pola numeryczne
Pola tekstowe mogą być stosowane do wprowadzenia liczb poprzez ustawienie wartości atrybutu type na wartość number. Ten typ pola tekstowego może być stosowany tylko do wprowadzenia liczb. Inne znaki nie są dozwolone i są ignorowane podczas ich wpisywania. Dodatkowo, przyciski strzałek pojawiają się obok pola tekstowego, co pozwala użytkownikowi przechodzić pomiędzy wartościami.
Tak jak z innymi polami tekstowymi, domyślna wartość może być określona atrybutem value. Naturalnie, wartość ta powinna być liczbą. Jednakże wartość minimalną i maksymalną można także określić przy zastosowaniu atrybutów min i max. Jeśli są one ustawione, można kontrolować zakres wartości, na które może być ustawione pole tekstowe. Jeśli użytkownik wprowadzi wartość mniejszą lub większą niż ta wartość, zostanie ona ponownie nastawiona na minimalną lub maksymalną wartości, o ile to konieczne. Dla przykładu, następujące numeryczne pole tekstowe posiada zakres pomiędzy 1 a 20.
<textbox type="number" min="1" max="20"/>
Jako że domyślna wartość nie jest określona, to domyślną wartością będzie minimalna wartość czyli 1. Atrybut min jest ustawiony na 1, aby wskazać minimalną możliwą wartość, jaką jest 1 i atrybut max jest ustawiony na 20, aby wskazać maksymalną możliwą wartość, jaką jest 20. Jeśli minimalna wartość nie jest określona, to domyślną wartością jest 0. Maksymalną domyślną wartością jest specjalna wartość Infinity, która oznacza brak limitu.
Inne numeryczne atrybuty pola tekstowego
Atrybut increment może zostać użyty do określenia, o jaką wartość ma się zmienić wartość pola, kiedy strzałki obok pola zostaną naciśnięte. Domyślną wartością jest 1, lecz określenie innej wartości pozwala dokonać zmiany o większą liczbę. Dla przykładu następujący przykład wielokrotnie wzrasta o 10.
<textbox type="number" increment="10" max="100"/>
To pole tekstowe przechodzi poprzez wielokrotności liczby 10 od 0 do 100. Do czasu, kiedy to atrybut min nie został określony, to domyślnie wynosi on 0. Note that the user can still enter other values if they are typed in. Atrybut increment oddziałuje tylko na przyciski strzałek. Użytkownik może także zwiększyć lub zmniejszyć wartość stosując ten 'przyrost' poprzez użycie klawiszy kursora 'do góry' i 'w dół', podczas gdy pole tekstowe jest zaznaczone i aktywne.
Atrybut decimalplaces wskazuje, ile miejsc po przecinku wyświetlić. Domyślną wartością jest 0, które oznacza, że mają zostać wyświetlone tylko liczby całkowite. Jednakże różne wartości mogą być zastosowane do wyświetlenia wartości dziesiętnych.
<textbox type="number" decimalplaces="2"/>
W tym przykładzie liczba zostanie pokazana do dwóch cyfr po prawej stronie przecinka. Wartości z dodatkowymi liczbami ułamkowymi są zaokrąglane do dwóch miejsc po przecinku.
Skale
Element scale może być także stosowany do wyboru wartości z zakresu. Zamiast pola tekstowego stosujemy przesuwaną skalę. Użytkownik może przeciągnąć uchwyt na skali, aby dostosować jej wartość.
Wiele takich samych atrybutów może być używanych wraz ze skalą jako pole numeryczne: atrybuty value, min, max i increment mogą być stosowane w podobnym stylu. Aktualnie skala nie wyświetla wartości liczbowych, lecz może być stosowane w skrypcie. A scale will fire a change event whenever the scales's value is modified.
Skala uruchomi zdarzenie <code>change</code>, zawsze gdy jej wartość zostanie zmodyfikowana
<scale value="40" min="1" max="50"/>
Ta skala domyślnie ustawiona jest na wartość 40 i posiada swój zakres pomiędzy 1 a 50.
Numeryczne pole tekstowe normalnie jest stosowane, kiedy dla użytkownika jest ważna wartość tego pola, na przykład; pole do wprowadzania numerów dni lub gdy podajemy maksymalny rozmiar pliku. Skala będzie używana wówczas, gdy bieżąca wartość nie jest ważna, lecz która przesuwa po skali zmniejszając lub zwiększając swój stan. Dla przykładu, suwak do regulacji dźwięku lub do zmiany poziomów powiększenia.
Domyślne ułożenie skali jest poziome wraz z mniejszymi wartościami z lewej strony i większymi wartościami po prawej stronie. Jednakże istnieje możliwość zmiany orientacji za pomocą atrybutów orient i dir.
<scale orient="vertical" dir="reverse"/>
Ta skala będzie wyświetlona pionowo z mniejszymi wartościami u dołu i większymi wartościami u góry.
Pola do wprowadzania daty i czasu
Elementy datepicker i timepicker mogą być stosowane do wprowadzania dat i czasu przez użytkownika. Kiedy używamy ich, wyświetlone zostaną ustawione numeryczne pola tekstowe do wprowadzenia każdego ze składników daty i czasu.
<datepicker value="2004/3/24"/> <timepicker value="15:30:00"/>
Atrybut value jest stosowany do ustawienia domyślnej wartości; jeśli atrybut ten zostanie pominięty, pole początkowo będzie ustawione na bieżącą datę i czas. Format atrybutu jest dokładnie jak w przykładzie powyżej, dla daty przybiera formę YYYY/MM/DD i dla czasu formę HH:MM:SS (pomimo że sekundy i towarzyszący im dwukropek mogą być pominięte).
These two elements ensure that the user enters a value date or time. This way, you do not have to check for valid dates, ensure that the day isn't greater than the number of days in the month, handle leap years, and so forth.
While the timepicker only comes is one style, the datepicker has three different variations. The default style shows three fields for entering the year, month and date. The type attribute may be used to select the other two. Using a value of grid uses a calendar grid, as shown in the image below.
Można również wykorzystać wartość popup, która tworzy kombinację dwóch typów. Ten typ posiada trzy pola do wprowadzenia roku, miesiąca i daty, as well as a dropdown button for displaying a popup calendar grid for selecting a day.
<datepicker type="popup"/>