Stiftung Schieber

Foundation Schieber ermöglicht es dem Benutzer, den Wertebereich zu wählen, indem Sie:

Slider mit Hilfe <div class="range-slider" data-slider> " Daten-Slider> erstellen. In der <div> innen, fügen Sie zwei <span> Element: <span class="range-slider-handle"> Erstellen einer rechteckigen Schieber (blauer Hintergrund), <span class="range-slider-active-segment"> in der grauen Leiste Schieber nach dem Schieberfläche.

Hinweis: Der Schieber benötigt JavaScript. So müssen Sie tiftung JS zu initialisieren:

Filet und deaktivieren Schieber

Verwenden Sie .radius und .round Klassen abgerundeten Ecken Schieber hinzuzufügen. Verwenden Sie .disabled Klasse den Schieberegler zu deaktivieren:

Vertikal Schieber

Verwenden Sie .vertical-range Klassen und data-options="vertical: true;" ," einen vertikalen Schieberegler zu erstellen:

Slider-Wert

Standardmäßig ist der Schieberegler in der Mitte (ein Wert von "50"). Sie können hinzufügen data-options="initial: num " " den Standardwert der Eigenschaft zu ändern:

Anzeige Reglerwert

Wenn wir den Regler Wert zu ziehen müssen , wenn die Echtzeit - Anzeige, können Sie erhalten <div> Fügen Sie die data-options="display_selector:# id " ID entspricht dem id - Attribut und den Wert des Schieberelements, als Beispiele:

Kombination von Datenoptionen

Das folgende Beispiel verwendet display_selector und initial

Schritt? Lange

Standardmäßig wird der Schieber bewegt, um die Zunahme der Zahl zu reduzieren "1" Sie können hinzufügen , data-options="step: num ;" ;" Attribut , um den Schrittwert zu ändern ?. Beispiel wird auf 25:

Benutzerdefinierte Intervall

Standardmäßig ist der Wert im Bereich von "0" bis "100" Sie können Add-Optionen Daten start und end Intervallwerte einzustellen. Die folgenden Beispiele stellen Sie den Intervallwert von "1" bis "20":

Verwenden des Rasters

Verwenden Sie den folgenden den Regler im Netz zu verwenden:

Verwenden Sie Eingabe

Das folgende Beispiel verwendet die <input> ersetzen <span> den Wert des Schiebers anzuzeigen: