jQuery UI Slider -> com suporte para roda do mouse?
Como você já deve saber que sou novo no jQuery, as melhorias de código que não pertencem a esse tema ainda são muito permitida
Este é o meu 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>
E este é o meu horrível 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" );
(o peso é 200)
No entanto, está funcionando, exceto um detalhe "pequeno": não com a roda do mouse! Eu já descobri que preciso desta extensão:https: //github.com/brandonaaron/jquery-mousewheel/download
Mas eu realmente não tenho absolutamente nenhuma idéia de como implementar isso no meu Slider (eu tenho 5 no meu site
Pls da ajuda, Thx!