更新滑块值时动态更改内容

Question

I am trying to dynamically change my page content when the slider values are changed. At the moment the user sets the slider, clicks a button below and content is displayed. When the sliders are changed again, the user has to click the button again to reload the content (because each button is assigned to the goalkeeperstat function.

<a class="chosenstat" title="Saves" value="saves" name="save" onclick="goalkeeperstat(this);">Saves</a>

Rather than having to press the button again I would like the content to change as soon as the user drags the slider handles to their chosen values.

Below is a screenshot of my page.

http://i.imgur.com/eZq08sI.jpg

$(function initSlider() {
    $("#slider1").slider({
      range: true,
      min: 0,
      max: 100,
      values: [0, 100],
      slide: function update1 (event, ui) {
        $(".amount").val(ui.values[0] + " - " + ui.values[1]);
        slidervalueg1 = $('#g1').val(ui.values[0]);
        slidervalueg2 = $('#g2').val(ui.values[1]);
      }
    });
    $(".amount").val($("#slider1").slider("values", 0) +
      " - " + $("#slider1").slider("values", 1));
    });

function goalkeeperstat(element){
    $('#result1').empty();
    $('.amount').empty();

        var category = element.getAttribute("value");
        var categoryprompt = element.getAttribute("title");
        var infocategory = element.getAttribute("name");
        var position = 1;
        var fr = $(myjson).filter(function (i,n){return n.element_type===position & n[category] >= slidervalueg1.val() && n[category] <= slidervalueg2.val() });

        for (var i=0;i<fr.length;i++)
        {
        document.getElementById('result1').innerHTML += ("<div class='profile'><img src='https://platform-static-files.s3.amazonaws.com/premierleague/photos/players/110x140/p" + fr[i].code + ".png'/><div class='playerinfo'><p>Name: " + fr[i].first_name + " " + fr[i].second_name + "</p><p>Position: " + posdictionary[fr[i].element_type.toString()] + "</p><p class='teamname'>Team: " + dictionary[fr[i].team.toString()] + "</p><p>" + categoryprompt + ": <span class='categoryprompt'>" + fr[i][category] + "</span></p></div><div class='infobg'><p>Minutes: " + fr[i].minutes + "</p><p>Minutes per " + infocategory + ": " + parseFloat(Math.round((fr[i].minutes / fr[i][category]) * 100) / 100).toFixed(2) + "</p></div></div>");

        }

    }

EDIT: Tried using "stop" but it wouldn't work. Any other tips?

Answer 1

you can use event or method explicit :

$("#slider1").slider({
      range: true,
      min: 0,
      max: 100,
      values: [0, 100],
      slide: function update1 (event, ui) {
        $(".amount").val(ui.values[0] + " - " + ui.values[1]);
        slidervalueg1 = $('#g1').val(ui.values[0]);
        slidervalueg2 = $('#g2').val(ui.values[1]);
      },
    stop : function(event, ui){
        console.log("slider changed");
        // call your fucntion here
    }
    });