En un post anterior se hablo sobre la simulación de un medidor de gasolina a través de este componente JSlider (ver post aquí), ahora les dejaré un pequeño ejemplo de cómo se puede colocar este componente en el intervalo necesario. Para entenderlo mejor dejaré un pequeño ejemplo a continuación.
$( "#fuel" ).slider({
value: 2,
min: 0,
max: 4,
step: 1
});
Aquí estamos dando las propiedades a la capa (div) con identificador fuel, que sea nuestro JSlider; como este.
Recordemos que estos están mucho más personalizados, lo cual es irrelevante. Digamos que queremos que la gasolina no este en el centro puesto que el value esta como 2 y si existe un intervalo entre el 0 al 4, quiere decir que su centro es el intervalo número 2.
El código necesario para ello es el siguiente, al ejecutar algún evento en un botón, texto, caja de selección, combo, etc. puede lograr que cambie de posición.
$( "#fuel" ).slider("value",0);
Como el valor que colocamos al atributo value fue 0 la orientación de nuestro JSlider se traslado al lado izquierdo.
$( "#fuel" ).slider("value",4);
Como el valor que colocamos al atributo value fue 4 la orientación de nuestro JSlider se traslado al lado derecho.
Espero haya sido de gran apoyo, de antemano gracias por sus comentarios.