O melhor tutorial deslizante Foundation em 2024. Neste tutorial você pode aprender
Lombo e desativar o controle deslizante,deslizante Vertical,valor Slider,
deslizante Foundation
Fundação barra permite que o usuário selecione o intervalo de valores arrastando:
Slider usando <div class="range-slider" data-slider>
" deslizante de dados> Criar. Na <div>
para dentro, adicione dois <span>
elemento: <span class="range-slider-handle">
Criar uma barra rectangular (fundo azul), <span class="range-slider-active-segment">
no controle deslizante barra cinza após a área de controle deslizante.
Observação: O regulador exige JavaScript. Então, você precisa inicializar OUNDATION JS:
Exemplos
<Div class = "gama-slider " data-deslizante>
<Span class = "gama-slider -Identificador"> </ span>
<Span class = "gama-slider -active-segmento"> </ span>
</ Div>
<! - Inicializar Fundação JS ->
<Script>
$ (Document) .ready (function () {
$ (Documento) .foundation ();
})
</ Script>
tente »
Lombo e desativar o controle deslizante
Use .radius
e .round
aulas para adicionar cantos arredondados slider. Use .disabled
classe para desativar o controle deslizante:
Exemplos
<Div class = "gama-slider " data-deslizante> pt </ div>
<Div class = "gama-slider raio" data-deslizante> pt. </ div>
<Div class = "gama-slider round"-slider dados> pt. </ div>
<Div class = "gama-slider desativado" data-deslizante> pt. </ div>
tente »
deslizante Vertical
Use .vertical-range
classes e data-options="vertical: true;"
;" para criar uma barra vertical:
Exemplos
<Div class = "gama-slider vertical-range"-deslizante de dados de opções de dados = "vertical: true;">
<Span class = "gama-slider -Identificador"> </ span>
<Span class = "gama-slider -active-segmento"> </ span>
</ Div>
tente »
valor Slider
Por padrão, a barra deslizante no meio (um valor de "50"). Você pode adicionar data-options="initial: num "
" para modificar o valor padrão da propriedade:
Exemplos
<Div class = "gama-deslizante "-deslizante de dados de opções de dados = "inicial: 80;">
<Span class = "gama-slider -Identificador"> </ span>
<Span class = "gama-slider -active-segmento"> </ span>
</ Div>
tente » Indicação do valor de controle deslizante
Se precisa arrastar o valor controle deslizante quando a visualização em tempo real, pode ser obtido por <div>
Adicione o data-options="display_selector:# id "
id corresponde ao atributo id eo valor do elemento deslizante, como exemplos:
Exemplos
<! - Exibe o valor controle deslizante na esse período ->
<Span id = "mySlider"> </ span>
<Div class = "gama-deslizante " de opções de dados de controle deslizante de dados = "display_selector: #mySlider;">
<Span class = "gama-slider -Identificador"> </ span>
<Span class = "gama-slider -active-segmento"> </ span>
</ Div>
tente » Combinação de opções de dados
O exemplo a seguir usa display_selector
e initial
opções de dados:
Exemplos
<Span id = "mySlider"> </ span>
<Div class = "gama-slider " deslizante de dados de opções de dados = "display_selector: #mySlider; inicial: 20;">
<Span class = "gama-slider -Identificador"> </ span>
<Span class = "gama-slider -active-segmento"> </ span>
</ Div>
tente » Passo? Longo
Por defeito, o cursor é movido para reduzir o aumento do número "1." Você pode adicionar data-options="step: num ;"
," atributo para modificar o valor do passo ?. Exemplo é definido como 25:
Exemplos
<Span id = "mySlider"> </ span>
<Div class = "gama-deslizante "-deslizante de dados de opções de dados = "display_selector: #mySlider; passo: 25;">
<Span class = "gama-slider -Identificador"> </ span>
<Span class = "gama-slider -active-segmento"> </ span>
</ Div>
tente » intervalo de costume
Por defeito, o valor no intervalo de "0" a "100." Você pode adicionar em Opções de Dados start
e end
para definir valores de intervalo. Os exemplos que se seguem estabelecem o valor do intervalo de "1" a "20":
Exemplos
<Span id = "mySlider"> </ span>
<Div class = "gama-deslizante "-deslizante de dados de opções de dados = "display_selector: #mySlider, começar: 1; final: 20;">
<Span class = "gama-slider -Identificador"> </ span>
<Span class = "gama-slider -active-segmento"> </ span>
</ Div>
tente » Usando a grade
Use o seguinte para usar o controle deslizante na grade:
Exemplos
<Div class = "linha">
<Div class = "small-10 colunas">
<Div class = "gama-deslizante " de opções de dados de controle deslizante de dados = "display_selector: #mySlider;">
<Span class = "gama-slider -Identificador"> </ span>
<Span class = "gama-slider -active-segmento"> </ span>
</ Div>
</ Div>
<Div class = "small-2 colunas">
<! - O elemento de exibição (Dica : use CSS para posicioná-lo perfeitamente) ->
<Span id = "mySlider" style = "display: block; margin-top: 14px;"> </ span>
</ Div>
</ Div>
tente » use Input
O exemplo a seguir usa o <input>
substituir <span>
para exibir o valor do controle deslizante:
Exemplos
<Div class = "linha">
<Div class = "small-10 colunas">
<Div class = "gama-slider " deslizante de dados de opções de dados = "display_selector: #mySlider; inicial: 72;">
<Span class = "gama-slider -Identificador"> </ span>
<Span class = "gama-slider -active-segmento"> </ span>
</ Div>
</ Div>
<Div class = "small-2 colunas">
<! - O elemento de exibição (Dica : use CSS para posicioná-lo perfeitamente) ->
<Input type = "número" id = "mySlider" style = "margin-top: 7px;" value = "72">
</ Div>
</ Div>
tente »