$(function() {

    $('#param1').numberMask({type: 'int', beforePoint: 5});
    $('#param1').jStepper({minValue:1, maxValue:10000});
    
    $('#param2').numberMask({type: 'float', beforePoint: 1, afterPoint: 2, decimalMark: ['.', ',']});
    $('#param2').jStepper({minValue:0, maxValue:2});
    
    $('#param3').numberMask({type: 'int', beforePoint: 2});
    $('#param3').jStepper({minValue:1, maxValue:24});
    
    $('#param4').numberMask({type: 'int', beforePoint: 2});
    $('#param4').jStepper({minValue:1, maxValue:12});

    var slider1 = $("#slider1");
    var slider2 = $("#slider2");
    var slider3 = $("#slider3");
    var slider4 = $("#slider4");

    slider1.slider({
        value: 12,
        min: 1,
        max: 10000,
        step: 1,
        range: "min",
        slide: function(event, ui) {
            $("#param1").val(ui.value);
        }
    });

    slider2.slider({
        value: 0.26,
        min: 0,
        max: 2,
        step: 0.01,
        range: "min",
        slide: function(event, ui) {
            $("#param2").val(ui.value);
        }
    });
    
    slider3.slider({
        value: 8,
        min: 1,
        max: 24,
        step: 1,
        range: "min",
        slide: function(event, ui) {
            $("#param3").val(ui.value);
        }
    });

    slider4.slider({
        value: 7,
        min: 1,
        max: 12,
        step: 1,
        range: "min",
        slide: function(event, ui) {
            $("#param4").val(ui.value);
        }
    });

    $("#param1").val(slider1.slider("value"));
    $("#param2").val(slider2.slider("value"));
    $("#param3").val(slider3.slider("value"));
    $("#param4").val(slider4.slider("value"));

    $(document).on("keyup keypress blur change", '#param1', function()
    {
        slider1.slider("value", $("#param1").val());
    });

    $(document).on("keyup keypress blur change", '#param2', function()
    {
        slider2.slider("value", $("#param2").val());
    });

    $(document).on("keyup keypress blur change", '#param3', function()
    {
        slider3.slider("value", $("#param3").val());
    });

    $(document).on("keyup keypress blur change", '#param4', function()
    {
        slider4.slider("value", $("#param4").val());
    });

});