Slider de rango rico en características con Pure JavaScript-JSR

Vista prévia

Descripción

JSR es un simple, plugin de JavaScript ligero que le ayuda a crear accesible, Performant, móvil amigable, altamente personalizable rango Slider para valores numéricos.

Funcionamiento

Incluya tanto mm-JSR. CSS como mm-JSR. js en la Página Web.

<link rel="stylesheet" href="mm-jsr.css">
<script src="mm-jsr.js"></script>

Cree entradas de rango normal para el control deslizante de rango. Tenga en cuenta que la biblioteca JSR admite todos los atributos de entrada de rango nativos, como ' step ', ' min ', ' Max ', etc.

<label for="jsrMin">Select minimum value</label>
<input id="jsrMin" name="range[min]" type="range" min="50" max="200" step="1" value="150">
<label for="jsrMax">Select maximum value</label>
<input id="jsrMax" name="range[max]" type="range" value="175">

Inicialice la librería JSR con algunas opciones.

var range = new JSRange('#jsrMin', '#jsrMax', {


sliders: 3,


values: [25, 50, 75]
})

Todas las opciones posibles con valores predeterminados.

var range = new JSRange('#jsrMin', '#jsrMax', {


// min/max values


min: 0,


max: 100,



// step size


step: 1,



// values from smallest to biggest


values: [25, 75],




labels: {



 minMax: true,



formatter: null


},




limit: {



show: false // shows limit


},



grid: {



color: 'rgba(0, 0, 0, 0.3)', // grid color



height: 10, // grid height



fontSize: 10, // font size



fontFamily: 'sans-serif', // fFont family



textPadding: 5 // padding in pixels


}



 // 'debug', 'info', 'warn', 'error'


log: 'error'
})

Registro de cambios

v1.1.5 (02/07/2019)

• Bugfix

v1.1.4 (06/03/2018)

• Bugfix