HTML-Eingabebereich mit Intervallen

Question

Ist es möglich, Intervalle zu einem HTML-Eingabebereich hinzuzufügen? Im Wesentlichen so, dass der Benutzer in den gegebenen Intervallen einfach auf die Leiste klicken kann. Ich weiß, es gibt einige Zoll-Schieberegler, die JS und CSS verwenden, aber ich möchte nur die Standardleiste mit einigen vertikalen Linien wirklich.

EDIT Sorry, ich hätte mehr klar: Was ich suche ganz visuell ist, werde ich meinen Code unten schreiben, aber ich habe den Schritt umgesetzt Attribut, was ich will, ist eine visuelle Darstellung auf der Balken, der dem Benutzer zeigt, dass es 5 mögliche Schritte/Intervalle auf der Leiste gibt und welche verfügbar sind.

<input id="slider" max="5" min="1" step="1" style="width:90%; height:30%; type="range" value="5"> 

Answer 1

Sie meinen so (siehe Code unten)? Sie müssen die step="X" Variable zu Ihrem Bereichsregler hinzufügen.

Was ist Schritt?

Arbeiten mit den min und max Attributen um die einzelnen Schritte zu beschränken, bei denen ein numerischer oder Datum-Zeit-Wert eingestellt werden kann. Es kann die Zeichenfolge beliebige oder eine positive Gleitkommazahl sein. Wenn dieses Attribut nicht auf " " gesetzt ist, akzeptiert das Steuerelement nur Werte mit einem Vielfachen des Schrittwerts größer als das Minimum.

Lesen Sie mehr unter Mozilla Developer Network.

<input id="slider1" type="range" min="1" max="11" step="2" />

Answer 2

hinzufügen step Attribut in das Eingabefeld.

<input type="range" min="0" max="100" step="10">