suwak Fundacja
Fundacja suwak pozwala użytkownikowi wybrać zakres wartości przeciągając:
Suwak przy użyciu <div class="range-slider" data-slider> " danych Suwak> Utwórz. W <div> wewnątrz, dodać dwa <span> Element: <span class="range-slider-handle"> Tworzenie prostokątny suwak (niebieskim tle), <span class="range-slider-active-segment"> w szarej suwak po powierzchni suwaka.
Uwaga: Suwak wymaga JavaScript. Więc trzeba zainicjować OUNDATION JS:
Przykłady
<Span class = "zakres-slider -handle"> </ span>
<Span class = "zakres-slider -Active-segmentowy"> </ span>
</ Div>
<! - Inicjowanie Fundacja JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Spróbuj »
Filet i suwak wyłączania
Użyj .radius i .round klas dodać zaokrąglonymi narożnikami suwak. Użyj .disabled klasę wyłączyć suwak:
Przykłady
<Div class = "zakres-suwak Promień" danych Suwak> ... </ div>
<Div class = "Zakres Suwak- round" danych Suwak> ... </ div>
<Div class = "zakres-slider wyłączony" danych Suwak> ... </ div>
Spróbuj »
suwak w pionie
Użyj .vertical-range klasy i data-options="vertical: true;" ;" , aby utworzyć suwak pionowy:
Przykłady
<Span class = "zakres-slider -handle"> </ span>
<Span class = "zakres-slider -Active-segmentowy"> </ span>
</ Div>
Spróbuj »
wartość Suwak
Domyślnie suwak w środku (wartość "50"). Możesz dodać data-options="initial: num " " , aby zmodyfikować domyślną wartość nieruchomości:
Przykłady
<Span class = "zakres-slider -handle"> </ span>
<Span class = "zakres-slider -Active-segmentowy"> </ span>
</ Div>
Spróbuj »
Wyświetlanie wartości suwaka
Jeśli musimy przeciągnąć wartość suwaka, gdy na wyświetlaczu w czasie rzeczywistym, można otrzymać poprzez <div> Dodać data-options="display_selector:# id " id odpowiada atrybut id oraz wartość elementu suwakowego, jako przykłady:
Przykłady
<Span id = "mySlider"> </ span>
<Div class = "zakres-slider " dane-options danych suwak = "display_selector: #mySlider;">
<Span class = "zakres-slider -handle"> </ span>
<Span class = "zakres-slider -Active-segmentowy"> </ span>
</ Div>
Spróbuj »
Kombinacja opcji danych
W poniższym przykładzie użyto display_selector i initial opcje danych:
Przykłady
<Div class = "zakres-slider " data-opcje danych suwak = "display_selector: #mySlider; początkowa: 20;">
<Span class = "zakres-slider -handle"> </ span>
<Span class = "zakres-slider -Active-segmentowy"> </ span>
</ Div>
Spróbuj »
Krok? Długi
Domyślnie, suwak jest przesuwany, aby ograniczyć wzrost liczby "1" Możesz dodać data-options="step: num ;" ;" atrybut zmodyfikować wartości kroku ?. Przykładem jest do 25:
Przykłady
<Div class = "zakres-slider " dane-options danych suwak = "display_selector: #mySlider; kroku: 25;">
<Span class = "zakres-slider -handle"> </ span>
<Span class = "zakres-slider -Active-segmentowy"> </ span>
</ Div>
Spróbuj »
interwał niestandardowe
Domyślnie wartość w zakresie od "0" do "100" Można dodatek Opcje danych start i end , aby ustawić wartości interwału. Poniższe przykłady ustawić interwał wartość "1" do "20":
Przykłady
<Div class = "zakres-slider " dane-options danych suwak = "display_selector: #mySlider start: 1; Koniec: 20;">
<Span class = "zakres-slider -handle"> </ span>
<Span class = "zakres-slider -Active-segmentowy"> </ span>
</ Div>
Spróbuj »
Korzystanie z sieci
Poniższe polecenia za pomocą suwaka w sieci:
Przykłady
<Div class = "small-10 kolumny">
<Div class = "zakres-slider " dane-options danych suwak = "display_selector: #mySlider;">
<Span class = "zakres-slider -handle"> </ span>
<Span class = "zakres-slider -Active-segmentowy"> </ span>
</ Div>
</ Div>
<Div class = "small-2 kolumny">
<! - Element wyświetlacza (Wskazówka : wykorzystanie CSS doskonale pozycjonować go) ->
<Span id = "mySlider" style = "display: block; margin-top: 14px;"> </ span>
</ Div>
</ Div>
Spróbuj »
Użyj Wejście
Poniższy przykład używa <input> wymiany <span> , aby wyświetlić wartość suwaka:
Przykłady
<Div class = "small-10 kolumny">
<Div class = "zakres-slider " data-opcje danych suwak = "display_selector: #mySlider; początkowa: 72;">
<Span class = "zakres-slider -handle"> </ span>
<Span class = "zakres-slider -Active-segmentowy"> </ span>
</ Div>
</ Div>
<Div class = "small-2 kolumny">
<! - Element wyświetlacza (Wskazówka : wykorzystanie CSS doskonale pozycjonować go) ->
<Input type = "number" id = "mySlider" style = "margin-top: 7px;" value = "72">
</ Div>
</ Div>
Spróbuj »