Rangeslider, un slider de alta calidad gráfica, para tus aplicaciones

DESCARGA : RangeSlider

Rangeslider, un slider de alta calidad gráfica, para tus aplicaciones , este plugin puede servir para implementar en algún sistema que maneje información donde el usuario ingrese una cantidad del 1% al 100%, también es importante destacar que además de interesante, este plugin es muy ligero y sencillo de implementar.

sliderrange

  1. Sensible a la pantalla táctil.
  2. Adecuado para su uso dentro de los diseños que resposive.
  3. Pequeño y rápido.

Puedes instalarlo de forma sencilla, tomando en cuenta algunos aspectos de implementación como por ejemplo el identificador de un input, en el siguiente código mostraremos la implementación.

<input type="range" max="1000" min="10" step="10" value="300" />

<script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="rangeslider.min.js"></script>
<script type="text/javascript">// <![CDATA[
$('input[type="range"]').rangeslider();
// ]]></script>

Además que en la dirección , se nos muestra la documentacion muy clara, donde se hace uso de las opciones.

<script type="text/javascript">// <![CDATA[
$('input[type="range"]').rangeslider({

// Feature detection
polyfill: true,

// CSS classes
baseClass: 'rangeslider',
rangeClass: 'rangeslider__range',
fillClass: 'rangeslider__fill',
handleClass: 'rangeslider__handle',

// Callback function
onInit: function() {},

// Callback function
onSlide: function(position, value) {},

// Callback function
onSlideEnd: function(position, value) {}
});
// ]]></script>

Demostración: http://andreruffert.github.io/rangeslider.js/

You may also like...