Elegante Slider de rango animado en Pure JavaScript-Ranger
| Autor: | sinnerschrade |
|---|---|
| Views Total: | 4,940 |
| Sitio oficial: | Ir a la web |
| Actualizado: | December 4, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Ranger es una biblioteca de JavaScript ligera y compatible con ES6 que se usa para crear un deslizador de rango animado y elegante con etiquetas y escalas personalizadas.
Funcionamiento
Cargue la hoja de estilos Ranger. CSS en la sección Head y el archivo JavaScript Ranger. js en la parte inferior del documento.
<link href="ranger.css" rel="stylesheet"/> <script src="ranger.js" async></script>
Cree un control deslizante de rango con la configuración opcional usando los atributos Data-* como sigue.
<div class="Slider js-ranger"> <input data-min="0" data-max="100" data-step="10" value="50" type="hidden" name="amount" autocomplete="off" class="js-ranger-input"> <div class="Slider-track js-ranger-track"> <div class="Slider-distance js-ranger-distance"> <div class="Slider-handle"></div> </div> </div> <output class="Slider-indicator js-ranger-indicator"> <small class="Slider-value js-ranger-value"></small> </output> </div>
