Pequeño complemento de control deslizante de rango adaptable con JavaScript-rangeSlider. js

Vista prévia

Descripción

rangeSlider. js es un pequeño y rápido plugin ES 5/6 compatible con JavaScript para renderizar un control deslizante de rango controlado por eventos delgado y receptivo en la aplicación Web.

Install it via NPM:

$ npm install rangeSlider.js

Funcionamiento

Cargue el JavaScript rangeSlider. js y la hoja de estilo rangeSlider. CSS en el documento.

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

La estructura HTML para el control deslizante de rango.

<div class="range-slider__container">

<div id="range-slider__bar" class="range-slider__bar range-slider__bar--style_01"></div>

<div id="range-slider__handle" class="range-slider__handle range-slider__handle--style_01">


<div class="range-slider__handle__item"></div>

</div>

<div id="range-slider" class="range-slider__handle-area"></div>
</div>

Cree un nuevo control deslizante de rango en el webapge.

var rangeSlider = new RangeSlider(


 // options here
);

Opciones predeterminadas para personalizar el control deslizante de rango.

var rangeSlider = new RangeSlider(


 sliderId: 'range-slider',


handleId: 'range-slider__handle',


barId: 'range-slider__bar',


startPosition: 0,


scaleDimension: 1,


handleDefaultPos: -7,
);

Manejo de eventos.

var rangeSlider = new RangeSlider(


 onDrag: null,


onDragging: null,


onDragged: null,


onChanged: null,


onRefreshed: null,


onInitialized: null
);