Control deslizante de rango D3. js en JavaScript puro-d3RangeSlider
| Autor: | RasmusFonseca |
|---|---|
| Views Total: | 3,675 |
| Sitio oficial: | Ir a la web |
| Actualizado: | April 15, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
d3RangeSlider es un plugin ligero de JavaScript de rango deslizante que permite elegir un rango de valores numéricos a través de arrastrar y soltar.
Dependiendo de la última biblioteca D3. js. La versión de jQuery está disponible < a href = "http://www.jqueryscript.net/form/Draggable-Range-Selection-Plugin-JQDRangeSlider.html" target = "_ blank" rel = "noopener noreferrer" > aquí .
Funcionamiento
Cargue la última versión de la biblioteca D3. js en el archivo HTML.
<script src="https://d3js.org/d3.v3.min.js"></script>
Descargue y cargue los archivos d3RangeSlider's después de D3. js.
<!-- Range slider code --> <script src="d3RangeSlider.js"></script> <!-- Range slider style --> <link href="d3RangeSlider.css" rel="stylesheet">
Cree un contenedor para mantener el control deslizante de rango.
<div id="slider-container"></div>
Cree un nuevo control deslizante de rango y defina los valores Min/Max.
var slider = createD3RangeSlider(0, 100, "#slider-container");
Establezca el rango en nuevos valores.
slider.range(1,10);
Detector de eventos.
slider.onChange(function(newRange){
console.log(newRange);
}); Registro de cambios
04/15/2019
- Método expuesto updateUIFromRange para redimensionados sin eventos; Añadida la opción de devolución de llamada onTouchEnd
