Deslizador de Foundation
El deslizador de Foundation permite a los usuarios seleccionar un valor de intervalo arrastrando:
El deslizador se puede crear usando<div class="range-slider" data-slider>. Dentro de<div>, añada dos<span>elementos:<span class="range-slider-handle">crea el deslizador rectangular (fondo azul),<span class="range-slider-active-segment">es la barra gris detrás del deslizador, que es el área de arrastre.
Nota:El deslizador requiere JavaScript. Por lo tanto, necesita inicializar Foundation JS:
Ejemplo
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
Pruébalo »
Esquinas redondeadas y deslizador deshabilitado
Use la.radiusy.roundclase para añadir esquinas redondeadas al deslizador. Utilice la.disabledclase para deshabilitar el deslizador:
Ejemplo
<div class="range-slider radius" data-slider>...</div>
<div class="range-slider round" data-slider>...</div>
<div class="range-slider disabled" data-slider>...</div>
Pruébalo »
Deslizador vertical
Use la.vertical-rangeclase ydata-options="vertical: true;"para crear un deslizador vertical:
Ejemplo
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
Pruébalo »
Valor del deslizador
Por defecto, el deslizador se coloca en el medio de la barra (valor "50"). Puede modificar el valor predeterminado añadiendo eldata-options="initial: num"atributo para modificar el valor predeterminado:
Ejemplo
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
Pruébalo »
Mostrar el valor del deslizador
Si necesitamos mostrar el valor en tiempo real al arrastrar el deslizador, podemos, en el
<div>añadir eldata-options="display_selector:#id"atributo, y el id del elemento debe coincidir con el id del deslizador, como en el siguiente ejemplo:
Ejemplo
<span id="mySlider"></span>
<div class="range-slider" data-slider data-options="display_selector: #mySlider;">
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
Pruébalo »
Opciones de datos combinadas
El siguiente ejemplo utiliza lasdisplay_selectoryinitialopciones de datos:
Ejemplo
<div class="range-slider" data-slider data-options="display_selector: #mySlider; initial: 20;">
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
Pruébalo »
Paso
Por defecto, la cantidad de aumento o disminución al arrastrar el deslizador es "1". Puede modificar el valor del paso añadiendo eldata-options="step: num;"atributo para modificar el valor del paso. En el ejemplo se establece en 25:
Ejemplo
<div class="range-slider" data-slider data-options="display_selector: #mySlider; step: 25;">
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
Pruébalo »
Intervalo personalizado
Por defecto, el intervalo de valores está entre "0" y "100". Puede configurar el intervalo añadiendo data-optionsstartyendpara establecer el intervalo de valores. El siguiente ejemplo establece el intervalo de valores de "1" a "20":
Ejemplo
<div class="range-slider" data-slider data-options="display_selector: #mySlider; start: 1; end: 20;">
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
Pruébalo »
Uso de cuadrícula
Lo siguiente es usar el deslizador en una cuadrícula:
Ejemplo
<div class="small-10 columns">
<div class="range-slider" data-slider data-options="display_selector: #mySlider;">
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
</div>
<div class="small-2 columns">
<!-- The display element (Tip: use CSS to perfectly position it) -->
<span id="mySlider" style="display:block;margin-top:14px;"></span>
</div>
</div>
Pruébalo »
Usar Input
El siguiente ejemplo usa<input>en lugar de<span>para mostrar el valor del deslizador:
Ejemplo
<div class="small-10 columns">
<div class="range-slider" data-slider data-options="display_selector: #mySlider; initial: 72;">
<span class="range-slider-handle"></span>
<span class="range-slider-active-segment"></span>
</div>
</div>
<div class="small-2 columns">
<!-- The display element (Tip: use CSS to perfectly position it) -->
<input type="number" id="mySlider" style="margin-top:7px;" value="72">
</div>
</div>
Pruébalo »