Deslizador de rango personalizable animado en Pure JavaScript-rSlider. js

Vista prévia

Descripción

rSlider. js es una biblioteca JavaScript libre de dependencias para la representación dinámica muy agradable < a href = "https://wikicss.com/tag/range-slider/" > los reguladores de rango con escalas personalizadas, etiquetas e información sobre herramientas.

Funcionamiento

Agregue la hoja de estilos ' rSlider. css ' y JavaScript ' rSlider. js ' a su página HTML.

<link rel="stylesheet" href="css/rSlider.min.css">
<script src="js/rSlider.min.js"></script>

Cree un campo de entrada de texto normal para el control deslizante de rango.

<input type="text" id="slider" class="slider">

Cree un nuevo control deslizante de rango desde el campo de texto.

var mySlider = new rSlider({


target: '#slider',


values: [2008, 2009, 2010, 2011, ...],


range: true // range slider
});

Más configuraciones para personalizar el control deslizante de rango.

var mySlider = new rSlider({


target: '#slider',


values: [2008, 2009, 2010, 2011, ...],


range: true // range slider


set:

null, // an array of preselected values


width:

null,


scale:

true,


labels:
 true,


tooltip:
true,


step:

 null, // step size


disabled: false, // is disabled?


onChange: null // callback
});

API methods.

// Returns selected values.
mySlider.getValue();

// Disables the range slider
mySlider.disabled(true);

// Callback
mySlider.onChange(function (values) {

 // argument values represents current values
 });

// Sets new values
mySlider.setValues(10, 20);

// Destroys the range slider
mySlider.destroy();