jQuery UI Slider -> con soporte de rueda del mouse?
como ya sabrás que soy nuevo en jQuery, por lo que las mejoras de código que no pertenecen a este tema todavía están muy permitida
Este es mi código HTML:
<div style="display: inline-block; width: 120px;">
<div>
Bananas:
<br />
<input id="bananas_amount" />
<input id="bananas_amount_percent" />
</div>
<br />
<div id="bananas" style="height:200px;"></div>
</div>
Y este es mi horrible código js:
$( "#bananas" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: 20,
step: 5,
slide: function( event, ui ) {
$( "#bananas_amount_percent" ).val( ui.value + " %" );
// the code displays a percentage by standart, but I need the real value, too:
var bananas_amount_percent = $( "#bananas_amount_percent" ).val();
var bananas_amount_percent = bananas_amount_percent.replace(" %", "");
var bananas_amount = Math.round((weight / 100) * bananas_amount_percent);
$( "#bananas_amount" ).val( bananas_amount + " g" );
}
});
$( "#bananas_amount_percent" ).val( $( "#bananas" ).slider( "value" ) + " %" );
// again the real value (else the value would not be updatet on reload-reset)
var bananas_amount_percent = $( "#bananas_amount_percent" ).val();
var bananas_amount_percent = bananas_amount_percent.replace(" %", "");
var bananas_amount = Math.round((weight / 100) * bananas_amount_percent);
$( "#bananas_amount" ).val( bananas_amount + " g" );
(el peso es 200)
Sin embargo, está funcionando, excepto un "pequeño" detalle: ¡no con la rueda del mouse! Ya descubrí que necesito esta extensión:https: //github.com/brandonaaron/jquery-mousewheel/download
Pero realmente no tengo ni idea de cómo implementar esto en mi Control deslizante (tengo 5 en mi sitio por cierto).
¡Ayuda por favor, gracias!