Responsive & control deslizante de alcance táctil en Vanilla JavaScript-rangeSlider

Vista prévia

Descripción

rangeSlider es una librería de JavaScript Pure Vanilla que convierte las entradas regulares de rango HTML5 en controles de interfaz de usuario de control deslizante de rango adaptables y móviles.

Instalación

# Yarn
$ yarn add rangeslider-pure

# NPM
$ npm install rangeslider-pure --save

Funcionamiento

Cargue el rangeSlider. CSS para los estilos predeterminados.

<link rel="stylesheet" href="dist/rangeSlider.css">

Cargue el rangeSlider. js al final del documento.

<script src="dist/rangeSlider.js"></script>

Cree una entrada de rango normal en el documento.

<input type="range" min="0" max="5" data-rangeSlider>

Uso.

// Initialize a new plugin instance for element or array of elements.
var slider = document.querySelectorAll('input[type="range"]')
rangeSlider.create(slider, {

polyfill: true,
 // Boolean, if true, custom markup will be created

rangeClass: 'rangeSlider',

disabledClass: 'rangeSlider--disabled',

fillClass: 'rangeSlider__fill',

bufferClass: 'rangeSlider__buffer',

handleClass: 'rangeSlider__handle',

startEvent: ['mousedown', 'touchstart', 'pointerdown'],

moveEvent: ['mousemove', 'touchmove', 'pointermove'],

endEvent: ['mouseup', 'touchend', 'pointerup'],

min: null,


// Number , 0

max: null,


// Number, 100

step: null,

 // Number, 1

value: null,

// Number, center of slider

buffer: null,

 // Number, in percent, 0 by default

stick: null,


 // [Number stickTo, Number stickRadius]

borderRadius: 10
// Number, if you use buffer + border-radius in css for looks good,

onInit: function () {


console.info('onInit')

},

onSlideStart: function (position, value) {


console.info('onSlideStart', 'position: ' + position, 'value: ' + value);

},

onSlide: function (position, value) {


console.log('onSlide', 'position: ' + position, 'value: ' + value);

},

onSlideEnd: function (position, value) {


console.warn('onSlideEnd', 'position: ' + position, 'value: ' + value);

}
});

// then...
var giveMeSomeEvents = true; // or false
slider.rangeSlider.update({min : 0, max : 20, step : 0.5, value : 1.5, buffer : 70}, giveMeSomeEvents);
// or
slider.rangeSlider.onSlideStart: function (position, value) {

console.error('anotherCallback', 'position: ' + position, 'value: ' + value);
}

Registro de cambios

v0.4.8 (04/06/2019)

• Añadir versión a RangeSlider
• exponer módulos internos (Dom, funciones)
• corregir offsetWidth de undefined

v0.4.7 (02/09/2019)

• dependencias de actualización
• corregir la función getDimension

12/02/2018

• v0.4.6: fix buffer (without z-index), code formatting

07/04/2018

• v0.4.5