Jump to content

Slider no JQuery UI


Th3Alchemist
 Share

Recommended Posts

Boas!

Estou com um problema ao implementar uma slider vertical na minha página:

Gostava que numa form fosse possível definir as horas de trabalho que uma pessoa tem, como por exemplo, das 7:00 até as 16:30, então para ser amigável a nível do utilizador, pensei em utilizar o slider da jquery ui.

O problema é que queria "inverter", pois aparece assim:

scaled.php?server=821&filename=sliderprob.png&res=medium

Ou seja, no topo é que devia estar o 7:00 e para baixo adiante as horas mais afrente

O código que tenho até agora feito é o seguinte:

$(function() {
    $("#slider2").slider({
        orientation: "vertical",
        min: 420, //420min = 7:00
        max: 1440, //1440min = 24:00
        step: 30, //meia em meia hora
        range: true,
        values: [ 420, 720 ], //7:00 - 12:00
        slide: function( event, ui ) {
            
            //hora de entrada:
            var hora_e = Math.floor(ui.values[0] / 60);
            var min_e  = ui.values[0] - (hora_e * 60);
            if(hora_e.lenght == 1) hora_e = '0'+hora_e;
            if(min_e.lenght == 1) min_e = '0'+min_e;
            if(min_e == '0') min_e = '00';
            
            //hora de saida:
            var hora_s = Math.floor(ui.values[1] / 60);
            var min_s  = ui.values[1] - (hora_s * 60);
            if(hora_s.lenght == 1) hora_s = '0'+hora_s;
            if(min_s.lenght == 1) min_s = '0'+min_s;
            if(min_s == '0') min_s = '00';
            
            $( "#amount" ).val(hora_e + ':' + min_e + " até " + hora_s + ':' + min_s);
            }
    });
});

Já li a documentação, mas não sei como proceder.

Link to comment
Share on other sites

Isto deve-te permitir fazer o que queres:

$(function() {
    $("#slider2").slider({
        orientation: "vertical",
        min: 420, //420min = 7:00
        max: 1440, //1440min = 24:00
        step: 30, //meia em meia hora
        range: true,
        values: [ 420, 720 ], //7:00 - 12:00
        slide: function( event, ui ) {
           
            //hora de entrada:
            var ent = 1440 - ui.values[0] + 420;
            var hora_e = Math.floor(ent / 60);
            var min_e  = ent - (hora_e * 60);
            if(hora_e.lenght == 1) hora_e = '0'+hora_e;
            if(min_e.lenght == 1) min_e = '0'+min_e;
            if(min_e == '0') min_e = '00';
           
            //hora de saida:
            var sai = 1440 - ui.values[1] + 420;
            var hora_s = Math.floor(sai / 60);
            var min_s  = sai - (hora_s * 60);
            if(hora_s.lenght == 1) hora_s = '0'+hora_s;
            if(min_s.lenght == 1) min_s = '0'+min_s;
            if(min_s == '0') min_s = '00';
           
            $( "#amount" ).val(hora_e + ':' + min_e + " até " + hora_s + ':' + min_s);
            }
    });
});

O código não foi testado. Simplesmente invertes o valor que é recebido...

"Nós somos o que fazemos repetidamente, a excelência não é um feito, e sim, um hábito."
Não respondo a questões por PM que possam ser colocadas no fórum!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.