Saturday, 17 April 2021

Set and send default jQuery slider values

I´m using the jQuery slider plugin. I´m sending the current selected value of the slider with AJAX to a server sided script. This works as expected.

Now I want to add the following:

o I want to set different slider max values depending on which li data-value element the user has clicked.

For example if you click on the <li data-value="582"> attribute the max value of the slider should be 39.

o The default loaded value should always be the max value of the current clicked li data-value element.

For example if you click on the <li data-value="0"> attribute the default loaded slider value should be 34.

I´ve made a JS Fiddle for better understanding.

This is my try:

    $("#slider-vertical").slider({
        orientation: "horizontal",
        range: "min",
        min: 1,
        slide: function (event, ui) {
            $("#amount").val(ui.value);
        },
        stop: getResponse
    });

    $("#amount").val($("#slider-vertical").slider("value"));
    getResponse(0);
  
    let $li = $('ul#menu li').on('click', function () {
        // set a class on the clicked element to be able to read its properties later
        $li.removeClass('active');
        $(this).addClass('active');
        getResponse();
    });

    function getResponse() {
        let bonus = $('ul#menu li.active').attr('data-value');
        let stufe = $("#slider-vertical").slider("value");
    
    console.log(bonus);
    
      if (bonus === undefined) {
          $("#slider-vertical").slider("option", "max", 29);
          $("#slider-vertical").slider("value", 29);
          $("#amount2").val($("#slider-vertical").slider('option', 'max'));
          $("#amount").val($("#slider-vertical").slider('value'));
                }
      else if (bonus === 0) {
          $("#slider-vertical").slider("option", "max", 34);
          $("#slider-vertical").slider("value", 34);
          $("#amount2").val($("#slider-vertical").slider('option', 'max'));
          $("#amount").val($("#slider-vertical").slider('value'));
                }
      else if (bonus === 582) {
          $("#slider-vertical").slider("option", "max", 39);
          $("#slider-vertical").slider("value", 39);
          $("#amount2").val($("#slider-vertical").slider('option', 'max'));
          $("#amount").val($("#slider-vertical").slider('value'));
                }

        ajaxManager.add({
            type: "GET",
            cache: "true",
            url: "itemscript.php",
            data: {
                "bonus": bonus,
                "stufe": stufe
            },
            success: function (data) {
 
            }
        });
    }
});


from Set and send default jQuery slider values

No comments:

Post a Comment