Control deslizante de doble pulgar en Vanilla JavaScript-Omni-Slider

Vista prévia

Descripción

Omni-Slider es una biblioteca de JavaScript pura vainilla que se utiliza para crear controles deslizantes de doble pulgar para ayudar al usuario a seleccionar un rango numérico.

También tiene la capacidad de crear un control deslizante normal con 1 mango que se puede utilizar para elegir un valor numérico.

¿Cómo funciona?

Agregue los archivos JavaScript y CSS del Omni-Slider a la Página Web.

<link rel="stylesheet" href="omni-slider.css">
<script src="omni-slider.js"></script>

El código JavaScript para crear un control deslizante de rango básico dentro del contenedor ' demo

var element = document.getElementById('demo');
var options = {



// options here
};
var mySlider = new Slider(element, options);

Opciones de personalización con valores predeterminados.

// slider only has one handle
isOneWay: false,

// returns a date object
isDate: false,

// handles will overlap or just sit next to each other
overlap: true,

// generic callback function is provided to apply to the value of the Slider
callbackFunction: function(){},

// Lower bounds of the slider
 min: null,

// Upper bounds of the slider
 max: null,

// Initial starting position of the left hand slider
start: null,

// Initial starting position of the right hand slider
end: null

Detectores de eventos.

var mySlider = new Slider(element, options);

var harry = mySlider.subscribe('start', function(data) {


// triggers when the handle is selected


console.log('harry ' + data.left);
});

var potter = mySlider.subscribe('moving', function(data) {


// triggers when the handle is being moved


console.log('potter ' + data.right);
});

var data = mySlider.subscribe('stop', function(data) {


// triggers when the handle is released
});