Slim multi Range Slider componente-Rangebar. js
| Autor: | nju33 |
|---|---|
| Views Total: | 3,552 |
| Sitio oficial: | Ir a la web |
| Actualizado: | March 23, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Rangebar. js es una biblioteca de JavaScript Vanilla (compatible con ES5/6) para renderizar deslizadores de rango delgado, agradable, horizontal o vertical en sus aplicaciones Web. Admite controles deslizantes individuales y múltiples.
Install the Rangebar:
# Yarn yarn add rangebar # NPM $ npm install rangebar # Bower $ bower install rangebar
Funcionamiento
Importe el Rangebar en su proyecto o incluya directamente los siguientes archivos JavaScript y CSS en su documento.
<script src="dist/rangebar.js"></script>
El código JavaScript para crear una nueva barra de rango:
new Rangebar({
target: getElementById('targetID')
}); Configuración de la barra de guardabosques como esta:
new Rangebar({
target: getElementById('targetID'),
data: {
style: {
// defualts
len: '8em',
width: '4px',
barBackgroundColor: '#222',
buttonBackgroundColor: '#cb1b45'
},
horizontal: true, // or false (vertical) (default: true)
min: 0, // minimum value (defualt: 0)
max: 100, // maximum value (default: 100)
buttons: [
// specify init position (required)
10,
20,
30
],
onChange(values) {
console.log(values.length) // 3, This returns the new value of this.buttons
}
}
});
