deslizador Fundación
Fundación deslizante permite al usuario seleccionar el rango de valores arrastrando:
Deslizador utilizando <div class="range-slider" data-slider> " slider datos> Crear. En el <div> dentro, añadir dos <span> elemento: <span class="range-slider-handle"> Crear un cursor rectangular (fondo azul), <span class="range-slider-active-segment"> en el control deslizante de la barra gris después de que el área del conmutador.
Nota: El regulador requiere JavaScript. Por lo que necesita para inicializar JS OUNDATION:
Ejemplos
<Span class = "gama-deslizador Manubrio en"> </ span>
<Span class = "gama-deslizador -active-segmento"> </ span>
</ Div>
<! - Inicializar Fundación JS ->
<Script>
$ (Document) ready (function () {
$ (Document) .foundation ();
})
</ Script>
Trate »
Filete y desactivar control deslizante
Utilice .radius y .round clases para agregar esquinas redondeadas deslizador. Utilice .disabled clase para desactivar el control deslizante:
Ejemplos
<Div class = "gama-deslizador radio" datos-deslizador> ... </ div>
<Div class = "gama-deslizador redonda" data-deslizador> ... </ div>
<Div class = "gama-deslizador desactivado" data-deslizador> ... </ div>
Trate »
deslizador vertical
Utilice .vertical-range clases y data-options="vertical: true;" ;" para crear un control deslizante vertical:
Ejemplos
<Span class = "gama-deslizador Manubrio en"> </ span>
<Span class = "gama-deslizador -active-segmento"> </ span>
</ Div>
Trate »
Regulador de valor
Por defecto, la barra de desplazamiento en el medio de (un valor de "50"). Puede agregar data-options="initial: num " " para modificar el valor predeterminado de la propiedad:
Ejemplos
<Span class = "gama-deslizador Manubrio en"> </ span>
<Span class = "gama-deslizador -active-segmento"> </ span>
</ Div>
Trate »
Regulador de valor de visualización
Si tenemos que arrastrar el regulador de valor cuando la visualización en tiempo real, se puede obtener <div> Añadir el data-options="display_selector:# id " ID coincida con el atributo id y el valor del elemento deslizante, como ejemplos:
Ejemplos
<Span id = "mySlider"> </ span>
<Div class = "gama-deslizador " slider-datos-opciones de datos = "display_selector: #mySlider;">
<Span class = "gama-deslizador Manubrio en"> </ span>
<Span class = "gama-deslizador -active-segmento"> </ span>
</ Div>
Trate »
Combinación de opciones de datos
En el siguiente ejemplo se utiliza display_selector y initial opciones de datos:
Ejemplos
<Div class = "gama-deslizador " slider de datos de datos-options = "display_selector: #mySlider; inicial: 20;">
<Span class = "gama-deslizador Manubrio en"> </ span>
<Span class = "gama-deslizador -active-segmento"> </ span>
</ Div>
Trate »
Paso? Largo
Por defecto, el cursor se mueve a reducir el aumento en el número "1" Puede agregar data-options="step: num ;" ;" atributo para modificar el valor del paso ?. Ejemplo se establece en 25:
Ejemplos
<Div class = "gama-deslizador " slider de datos de datos-options = "display_selector: #mySlider; paso: 25;">
<Span class = "gama-deslizador Manubrio en"> </ span>
<Span class = "gama-deslizador -active-segmento"> </ span>
</ Div>
Trate »
intervalo personalizado
Por defecto, el valor en el rango de "0" a "100" Puede complemento opciones de datos start y end para establecer valores de intervalo. Los siguientes ejemplos establecen el valor del intervalo de "1" a "20":
Ejemplos
<Div class = "gama-deslizador " slider de datos de datos-options = "display_selector: #mySlider; empezar: 1; final: 20;">
<Span class = "gama-deslizador Manubrio en"> </ span>
<Span class = "gama-deslizador -active-segmento"> </ span>
</ Div>
Trate »
Uso de la cuadrícula
Utilice el siguiente al utilizar el control deslizante en la red:
Ejemplos
<Div class = "small-10 columnas">
<Div class = "gama-deslizador " slider-datos-opciones de datos = "display_selector: #mySlider;">
<Span class = "gama-deslizador Manubrio en"> </ span>
<Span class = "gama-deslizador -active-segmento"> </ span>
</ Div>
</ Div>
<Div class = "small-2 columnas">
<! - El elemento de visualización (Tip : Uso de CSS para posicionar perfectamente que) ->
<Span id = estilo "mySlider" = "display: block; margin-top: 14px;"> </ span>
</ Div>
</ Div>
Trate »
Uso de la entrada
En el siguiente ejemplo se utiliza el <input> reemplace <span> para visualizar el valor del deslizador:
Ejemplos
<Div class = "small-10 columnas">
<Div class = "gama-deslizador " slider de datos de datos-options = "display_selector: #mySlider; inicial: 72;">
<Span class = "gama-deslizador Manubrio en"> </ span>
<Span class = "gama-deslizador -active-segmento"> </ span>
</ Div>
</ Div>
<Div class = "small-2 columnas">
<! - El elemento de visualización (Tip : Uso de CSS para posicionar perfectamente que) ->
<Input type = "número" id = estilo "mySlider" = "margin-top: 7px;" value = "72">
</ Div>
</ Div>
Trate »