CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Graver
Graver

Reputation: 127

Jquery UI getting value from slider

I have two sliders in my page : one with period and the other one with amount. I want to get the values of the sliders every time them are changed, and that values use in another function. Here is my code

For period slider

        $(function() {
        $( "#slider-period" ).slider({
            range   : "max",
            min : 3,
            max : 12,
            value   : 4,
            slide   : function (event,ui) {
                $(".period").html(ui.value+" years");

            },
            change  : function (event,ui) {
                $(".period").html(ui.value+" years");

            }

        });
    });

For amount slider:

        $(function() {
        $( "#slider-amount" ).slider({
            range   : "max",
            min : 500,
            max : 150000,
            step    : 1000,
            value   : 1200,
            slide   : function (event,ui) {
                $("#amount").html(ui.value+" RON");
            },
            change  : function (event,ui) {
                $("#amount").html(ui.value+" RON");
            }


        });

     });

I want to make two global variables that are actualized every time the sliders are changed. Any idea?

Upvotes: 0

Views: 706

Answers (2)

Ethan Turk
Ethan Turk

Reputation: 437

Try making a global function that is called whenever they are updated.

function sliderUpdated() {
    var periodVal = $( "#slider-period" ).slider("option", "value");
    var amountVal = $( "#slider-amount" ).slider("option", "value");

    //dostuff
}

For period slider

    $(function() {
    $( "#slider-period" ).slider({
        range   : "max",
        min : 3,
        max : 12,
        value   : 4,
        slide   : function (event,ui) {
            $(".period").html(ui.value+" years");

        },
        change  : function () {
            sliderUpdated();

        }

    });
});

For amount slider:

    $(function() {
    $( "#slider-amount" ).slider({
        range   : "max",
        min : 500,
        max : 150000,
        step    : 1000,
        value   : 1200,
        slide   : function (event,ui) {
            $("#amount").html(ui.value+" RON");
        },
        change  : function () {
            sliderUpdated();
        }


    });

 });

Upvotes: 1

David Jones
David Jones

Reputation: 4305

You can just make two variables at the top of your script and update them from the change method of the jquery slider. For example

    var years;
    var amount;

    $(function() {
        $( "#slider-period" ).slider({
            range   : "max",
            min : 3,
            max : 12,
            value   : 4,
            slide   : function (event,ui) {
                $(".period").html(ui.value+" years");

            },
            change  : function (event,ui) {
                $(".period").html(ui.value+" years");
                years = ui.value;
            }

        });
    });

 $(function() {
        $( "#slider-amount" ).slider({
            range   : "max",
            min : 500,
            max : 150000,
            step    : 1000,
            value   : 1200,
            slide   : function (event,ui) {
                $("#amount").html(ui.value+" RON");
            },
            change  : function (event,ui) {
                $("#amount").html(ui.value+" RON");
                amount = ui.value;
            }
        });
     });

Upvotes: 0

Related Questions