Блог

Я реализовал слайдер jQueryUI и хочу отображать минимальные и максимальные значения слайдера в 2 разных подразделениях. Значения в div будут обновляться по мере настройки пользователем ползунка. В divs также будут показаны начальные значения слайдера.

Проблема: div отображается [object object] как начальные значения, но показывает правильные обновленные значения по мере настройки ползунка пользователем. Мне нужна помощь, чтобы отобразить начальные значения.

Код jQuery:

 $("#filter_submenu_rent").slider({
    range: true,
    min: 0,
    max: 10000,
    values: [ 75, 300 ],
    slide: function( event, ui ) {
        $( "#rent_min" ).html( "Min: $"   ui.values[ 0 ] );
        $( "#rent_max" ).html( "Max: $"   ui.values[ 1 ] );
    }
})
$( "#rent_min" ).html( "Min: $"   $( "#slider_rent" ).slider( "values", 0 ));
$( "#rent_max" ).html( "Max: $"   $( "#slider_rent" ).slider( "values", 1 ));
  

HTML-код

 <div id="filter_submenu_rent">
            <div id="rent_min"></div>
            <div id="slider_rent"></div>
            <div id="rent_max"></div>
</div>
  

Код jQuery (еще одна попытка)
Изначально при использовании этого в 2 divs ничего не отображается

 $("#filter_submenu_rent").slider({
    range: true,
    min: 0,
    max: 10000,
    values: [ 75, 300 ],
    slide: function( event, ui ) {
        $( "#rent_min" ).html( "Min: $"   ui.values[ 0 ] );
        $( "#rent_max" ).html( "Max: $"   ui.values[ 1 ] );
    },
    create: function(event, ui) {
        $( "#rent_min" ).html( "Min: $"   ui.values[ 0 ] );
        $( "#rent_max" ).html( "Max: $"   ui.values[ 1 ] );
    }
})
  

Основная проблема, которую я вижу, заключается в том, что у вас есть два разных объекта в качестве вашего слайдера:

определение есть $("#filter_submenu_rent").slider , но код позже будет: $( "#slider_rent" ).slider

Рабочий пример: http://jsfiddle.net/4tDjZ/1 /

Некоторым это может показаться немного банальным, но я обнаружил, что вы можете поместить пользовательские свойства в объект параметров слайдера и получить к ним доступ, как к любому другому параметру слайдера позже.

 $('#myslider').slider({min: 0, max: 10, value: 5, myinitval: 5});

// will remain 5, unless your event handlers change it
$('#myslider').slider('option', 'myinitval');