изменить текст при перемещении ползунка

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>

Я пытаюсь изменить текст, когда ползунок перемещается, в браузере ничего не происходит.Есть мысли?

Answer 1

У вас есть пара ошибок. Во-первых, вы не хотите использовать $(this).val(...). Это просто установка значения $(this), что не является тем, что вы хотите сделать в этом случае. Вы просто хотите получить значение, которое предоставляется ui.value, когда вы находитесь в методах объекта слайдера. Помимо методов слайдера, вы просто хотите $(".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") + "%");
});

Демо: http://jsfiddle.net/XjD4K/

Answer 2

Я не верю, что $ this.val () необходим

 $(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>