Schieberegler

Eine häufige Alternative zu Drehfeldern, stellen Schieberegler dar. Diese nehmen allerdings relativ viel Platz ein und erlauben dem Benutzer auch nicht, Werte direkt per Tastatur einzugeben. Um diese beiden Probleme zu lösen, bieten einige Frameworks einen Verbund aus Kombinationsfeld und Schieberegler an. Derartige Steuerelemente nehmen deutlich weniger Platz ein und erlauben dem Benutzer, auch Werte direkt per Tastatur einzugeben.

Bei Touch-Bildschirmen können Schieberegler mit den Fingern in der Regel deutlich einfacher bedient werden als die kleinen Inkrement- und Dekrement-Schaltflächen von Drehfeldern.

Combobox

Bei einer überschaubaren Anzahl von Werten, können auch Kombinationsfelder (Combobox) genutzt werden.

Cycle Button

Cycle Buttons stellen eine sehr seltene Variante eines Drehfeldes dar. Ein Cycle Button verhält sich identisch zur Schaltfläche zur Inkrementierung des Wertes. Es fehlt aber die Schaltfläche zur Dekrementierung. Mit jedem Klick auf diese Schaltfläche, wird der aktuelle Wert erhöht. Ist das Ende der Liste erreicht, fängt das Steuerelement wieder am Anfang der Liste an.

Microsoft Windows (Systemkomponente)

Unter Microsoft Windows werden native Drehfelder unter dem Klassennamen „msctls_updown32“ bereitgestellt.

Microsoft .NET

using System;
using System.Drawing;
using System.Windows.Forms;

internal class MainForm : Form
{
  private NumericUpDown udOpacity;

  //Formular initialisieren
  public MainForm()
  {
    udOpacity = new NumericUpDown();

    SuspendLayout();

    udOpacity.SetBounds(10, 10, 580, 90);
    udOpacity.Minimum = 20; //Wertebereich Minimum: 20%
    udOpacity.Maximum = 100; //Wertebereich Maximum: 100%
    udOpacity.Value = 100; //Aktueller Wert: 100% Deckkraft
    udOpacity.ValueChanged += new EventHandler(SyncOpacity);

    AutoScaleDimensions = new SizeF(12F, 25F);
    AutoScaleMode = AutoScaleMode.Font;
    ClientSize = new Size(600, 60);
    Controls.Add(udOpacity);
    FormBorderStyle = FormBorderStyle.FixedSingle;
    MaximizeBox = false;
    Text = "Deckkraft verändern...";

    ResumeLayout(false);
  }

  //Einstiegspunkt des Programms
  private static void Main()
  {
    Application.Run(new MainForm());
  }

  //Wert des Drehfeldes mit Deckkraft des Formulars synchronisieren
  private void SyncOpacity(object sender, EventArgs e)
  {
    //Aktueller Wert des Drehfeldes entspricht der Deckkraft des Formulars
    Opacity = (float)udOpacity.Value / 100F;
  }
}

Microsoft Xamarin

Für Microsoft Xamarin existiert die Komponente Xamarin.Forms.Stepper.

Microsoft Fluent UI Web Components

Numerische Drehfelder sind auch in der Komponentenbibliothek Microsoft Fluent UI Web Components unter dem Namen fluent-number-field enthalten. Es handelt sich dabei um ein Textfeld, das nur die Eingabe von Zahlen in einem frei definierbaren Wertebereich erlaubt und am Rand die typischen Schaltflächen eines Drehfelds besitzt.

Die wichtigsten Attribute sind:

• value – Der aktuelle Wert.
• min – Der minimal zulässige Wert.
• max – Der maximal zulässige Wert.
• step – Die Schrittweite. Der Standardwert ist 1.

Java

HTML 5 und CSS 3

In HTML 5 wurde für Formulare der neue Eingabetyp „number“ eingeführt. Moderne Webbrowser stellen Eingabefelder dieses Typs als Textfeld mit den typischen Schaltflächen zur Inkrementierung und Dekrementierung des Wertes dar. Zudem ist es möglich, das Minimum (min), das Maximum (max) und die Schrittweite (step) als Attribut anzugeben. Ältere Webbrowser zeigen hingegen nur ein Textfeld ohne den beiden Schaltflächen an. Um sicherzustellen, dass sich der eingegebene Wert im zulässigen Intervall befindet, sollten die übermittelten Daten client- oder serverseitig auf Gültigkeit geprüft werden.

Für Webbrowser, die auf WebKit basieren (z. B. Chrome, Safari, Opera und Edge), existieren CSS Pseudoelemente, mit denen die einzelnen Bestandteile benutzerdefiniert formatiert werden können. Da diese derzeit allerdings nicht standardisiert sind (Stand: Juli 2022), besitzen sie ein browserspezifisches Präfix.

•  ::-webkit-inner-spin-button – Die beiden Schaltflächen innerhalb des Rahmens.
•  ::-webkit-outer-spin-button – Die beiden Schaltflächen außerhalb des Rahmens.
•  ::-webkit-textfield-decoration-container – Der gemeinsame Container für das Textfeld und den beiden Schaltflächen.

Andere Webbrowser unterstützen diese Möglichkeiten derzeit (Stand: Juli 2022) nicht.