Установить максимальное значение в слайдер

Question

Я пытаюсь установить максимальное значение динамически в своем слайдере, максимальное значение получается из ввода #max, я пробовал $ ("# max"). Val, чтобы поместить этот код в максимальная переменная, но она не работает.

отредактировано: Когда пользователь выбирает одну категории, я показываю все продукты из этой категории, и с АЯКС части я установить значение входного #max (максимальную цену)

//When user select one category, I display all the product from this category, and in my ajax part I 
 
$('#category').change(function() { 
 

 
$.ajax({ 
 
    url: 'ajax.php', 
 
    data: {category: category}, 
 
    dataType: 'json', 
 
    cache: false, 
 
    type: "GET", 
 
    success: function(data){  
 
     if (data.length > 0) { 
 
      data.forEach(function (elem) { 
 
       $('#max').val(elem.MaxPrice); //set the Maximum price in the hidden input   
 
       $('#listing_annonce_int').append('<div id="title">'+ elem.title +'</div><div id="price">'+ elem.price +'</div>'); 
 
       }) 
 
      } 
 
     } 
 
    }) 
 
    
 
}); 
 

 
/**************************************/ 
 

 
function showProducts(minPrice, maxPrice) { 
 
    $("#listing_annonce_int .listing_annonce_view").hide().filter(function() { 
 
    var price = parseInt($(this).data("price"), 10); 
 
    return price >= minPrice && price <= maxPrice; 
 
    }).show(); 
 
} 
 

 
$(function() { 
 
    var options = { 
 
    range: true, 
 
    min: 0, 
 
    max: 20000, 
 
    values: [0, 5000], 
 
    slide: function(event, ui) { 
 
     var min = ui.values[0], 
 
      max = ui.values[1];    
 

 
     $("#amount").val(min + " € - " + max + " €"); 
 
     showProducts(min, max); 
 
    } 
 
    }, min, max; 
 

 
    $("#slider-range").slider(options); 
 

 
    min = $("#slider-range").slider("values", 0); 
 
    max = $("#slider-range").slider("values", 1); 
 

 
    $("#amount").val(min + " €- " + max + " €"); 
 
    showProducts(min, max); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<select id="category" name="category"> 
 
<option value='1'>cat 1</option> 
 
<option value='2'>cat 2</option> 
 
</select> 
 

 
    <input type="text" id="amount"/> 
 
    <input type="text" id="max"/> 
 
    <div id="slider-range"></div>

Answer 1

Это потому, что вы ничего не делаете, чтобы установить новое значение. Вы должны добавить слушатель:

$('#max').keyup(function(){ 
    $("#slider-range").slider("option", "max", parseInt($(this).val())); 
}); 

Вы должны также проверить документальные функции: http://api.jqueryui.com/slider/#option-max

Работы скрипки: https://jsfiddle.net/4p2mL282/1/

ОБНОВЛЕНО ОТВЕТ

действительно вы нужен ли поле ввода? Самый простой способ - это изменить его. заменить

$('#max').val(elem.MaxPrice); 

с

$("#slider-range").slider("option", "max", parseInt(elem.MaxPrice)); 

в вызове AJAX изменения() - функция

Если вам необходимо в поле ввода, я могу объяснить, почему текущая версия не работает. Когда вы меняете значение элемента, имеющего onchange-listener с .val(), вам всегда нужно запускать событие самостоятельно.

т.е. для примера в комментариях

$('#max').val('1000').change(); 

Вы всегда можете заставить это событие, назвав его функции без передачи каких-либо параметров.

Но это все еще не ваша правильная проблема. Проблема заключается в том, что вы устанавливаете значение поля #max в функции изменения #category, но у вас нет переключателя изменений для #max.

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