Получение значения из слайдера пользовательского интерфейса jQuery

У меня есть слайдер jQuery UI, который является частью системы рейтинга. Вы переходите к значениям 1 - 5, чтобы оценить его с 1 по 5. Я получил значение по умолчанию 3, когда сначала появляется ползунок. Форма, в которой он входит, имеет скрытый ввод, значение которого должно быть значением ползунка, но это не так.

Здесь jQuery:

$( "#ratingSlider" ).slider({
        range: "min",
        value: 3,
        min: 1,
        max: 5,
        slide: function( event, ui ) {
            $( "#ratingResult" ).val( ui.value );
        }
    });
    $( "#ratingResult" ).val( $( "#ratingSlider" ).slider( "value" ) );
    $("#ratingSlider").change(function(){
        $( "#rateToPost" ).attr('value', $( "#ratingSlider" ).slider( "value" ) );
    });

Я попытался сделать .val() из #rateToPost как .val() ползунка, но он всегда только дал ему 3 (значение по умолчанию).

Как я могу заставить его правильно передать значение?

Кроме того, я хочу, чтобы значение автоматически обновлялось (прямо сейчас оно отображается с помощью текстового поля, но я действительно не хочу использовать текстовое поле) на странице всякий раз, когда перемещается ползунок, как я могу это сделать

Ответ 1

Чтобы отобразить рейтинг при слайде в вашей слайдерной инициализации, вам нужно изменить текст этого div (Предполагая, что у вас есть div (а не поле ввода) с идентификатором "ratingResult" ). Чтобы обновить значение, когда пользователь заканчивает перетаскивание, вам нужно добавить событие изменения в код инициализации.

$("#ratingSlider").slider({
    range: "min",
    value: 3,
    min: 1,
    max: 5,
    //this gets a live reading of the value and prints it on the page
    slide: function(event, ui) {
      $("#ratingResult").text(ui.value);
    },
    //this updates the value of your hidden field when user stops dragging
    change: function(event, ui) {
      $('#rateToPost').attr('value', ui.value);
    }
  });

Ответ 2

Используйте ui.value в обработчике событий изменения.

$('#ratingSlider').change(function(e, ui) {
    $('#rateToPost').attr('value', ui.value);
});