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:

Lombo e desativar o controle deslizante

Use .radius e .round aulas para adicionar cantos arredondados slider. Use .disabled classe para desativar o controle deslizante:

deslizante Vertical

Use .vertical-range classes e data-options="vertical: true;" ;" para criar uma barra vertical:

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:

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:

Combinação de opções de dados

O exemplo a seguir usa display_selector e initial opções de dados:

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:

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":

Usando a grade

Use o seguinte para usar o controle deslizante na grade:

use Input

O exemplo a seguir usa o <input> substituir <span> para exibir o valor do controle deslizante: