Text ändern, wenn sich der Schieberegler bewegt

Question

$(function() { 
    $(".sli3").slider({ 
     range: "min", 
     value: 50, 
     min: 0, 
     max: 100, 
     slide: function(event, ui) { 
      $(".sli3_f").text($(this).val( ui.value+"%")); 
     } 
    }); 
    $(".sli3_f").text($(this).val($(".sli3").slider("value")+"%")); 
}); 


<div class="sli3"><span class="sli3_f"></span></div> 

Ich versuche den Text zu ändern, wenn sich der Schieberegler bewegt nichts passiert im Browser. Irgendwelche Gedanken?

Answer 1

Ich glaube nicht, dass die $ this.val() erforderlich ist

$(function() { 
    $(".sli3").slider({ 
     range: "min", 
     value: 50, 
     min: 0, 
     max: 100, 
     slide: function(event, ui) { 
      $(".sli3_f").text(ui.value+"%"); 
     } 
    }); 
    $(".sli3_f").text($(".sli3").slider("value")+"%"); 
}); 


<div class="sli3"><span class="sli3_f"></span></div> 

Answer 2

Sie haben ein paar Fehler. Zuerst möchten Sie nicht $(this).val(...) verwenden. Dies setzt nur den Wert $(this), was Sie in diesem Fall nicht tun möchten. Sie möchten nur den Wert abrufen, der von ui.value bereitgestellt wird, wenn Sie sich in den Methoden des Schiebereglerobjekts befinden. Außerhalb der Methoden des Gleiters, möchten Sie gerade $(".sli3").slider("value"):

$(function() { 
    $(".sli3").slider({ 
     range: "min", 
     value: 50, 
     min: 0, 
     max: 100, 
     slide: function(event, ui) { 
      $(".sli3_f").text(ui.value + "%"); 
     } 
    }); 

    $(".sli3_f").text($(".sli3").slider("value") + "%"); 
}); 

Demo: http://jsfiddle.net/XjD4K/