у меня есть такой ползунок ,оно делает фильтрацию цен продуктов хочу получить актуальное значение ползунка при движении
вот index.html каркас главной страницы
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<title>JQuery корзина : корзина для сайта : JavaScript</title>
<meta HTTP-EQUIV="Description" CONTENT="Простое и доступное решение для организации покупок на сайте. WICart - скрипт онлайн корзины для вашего сайта. Подходит для HTML сайтов, без установки сложных CMS систем" />
<meta HTTP-EQUIV="Keywords" CONTENT="корзина для сайта скрипт корзины для сайта корзина покупок для сайта как добавить корзину на сайт корзина товаров для сайта корзина для html сайта кнопка корзина для сайта" />
<meta name="Robots" content="INDEX, FOLLOW">
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen" charset="utf-8"/>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" type="text/css" media="screen" charset="utf-8"/>
<link href="css/style.css" type="text/css" rel="stylesheet">
<link href="css/wicart.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<link type="text/css" rel="stylesheet" href="css/css.css">
<body>
<script src="js/jquery-1.7.1.min.js" type="text/javascript" ></script>
<script src="js/wicart.js" type="text/javascript" ></script>
<script src="js/jquery.validationEngine-ru.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-1.8.17.custom.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery.main.js"></script>
<script type="text/javascript" src="js/jquery_002.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ga.js"></script>
</head>
<body>
<!--div id="prjclose">
<div id="sbj">Проект закрыт</div>
<div id="mail">По всем вопросам: <a href="mailto: z_evgen@mail.ru">z_evgen@mail.ru</a></div>
</div-->
<div id="wrapper">
<div class="bsk border">
<span style="font: bold 14px Arial;">Корзина: </span>
<a href="#" onclick="cart.clearBasket()" style="float: right; margin-top: 4px">Очистить</a>
<a href="#" id="basketwidjet" onclick="cart.showWinow('bcontainer', 1)"></a> <span style="font: normal 11px Arial"></span>
</div>
<h1>JQuery корзина</h1>
<div class="formCost">
<label for="minCost">Цена: от</label> <input id="minCost" value="0" type="text">
<label for="maxCost">до</label> <input id="maxCost" value="100" type="text">
</div>
<div class="bs border">
<div id="price-range">
<fieldset>
<label for="amount">Price range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
<div id="amount-two"></div>
<select id="min" name="min">
<option value="0">0</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
</select>
<br/>
<select id="max" name="max">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select>
</fieldset>
</div>
</div>
<div class="clear"></div>
<div id="vitrine" class="border">
<table class="data">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Occupation</th>
<th>Approx. Location</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>203A</td>
<td>Johny Stardust (<a href="#">bio</a>)</td>
<td>Front-man</td>
<td>Los Angeles</td>
<td>$79</td>
</tr>
<tr>
<td>141B</td>
<td>Beau Dandy (<a href="#">pic</a>,<a href="#">bio</a>)</td>
<td>Singer</td>
<td>New York</td>
<td>$39</td>
</tr>
<tr>
<td>2031</td>
<td>Mo' Fat (<a href="#">pic</a>)</td>
<td>Producer</td>
<td>New York</td>
<td>$100</td>
</tr>
<tr>
<td>007F</td>
<td>Kellie Kelly (<a href="#">bio</a>,<a href="#">press</a>)</td>
<td>Singer</td>
<td>Omaha</td>
<td>$15</td>
</tr>
<tr>
<td>Keytarist</td>
<td> <a href="#" onclick="cart.addToCart(this, '001', 'IPhone 5', '20500')" class="item_img"><img src="img/shop/iphone5.png" width="200"></a>
<p><b>IPhone 5</b>
<br>
<button class="border" onclick="cart.addToCart(this, '001', 'IPhone 5', '20500')">Купить</button></td>
<td>$95</td>
</tr>
<tr>
<td>Keytarist</td>
<td> <a href="#" onclick="cart.addToCart(this, '001', 'IPhone 5', '20500')" class="item_img"><img src="img/shop/iphone5.png" width="200"></a>
<p><b>IPhone 5</b>
<br>
<button class="border" onclick="cart.addToCart(this, '001', 'IPhone 5', '20500')">Купить</button></td>
<td>$55</td>
</tr>
</tbody>
</table>
<div class="clear"></div>
</div>
</div>
<!---Форма для магазина-------------------------------->
<div id="order" class="popup">
<a href="#" onclick="cart.closeWindow('order', 0)" style="float:right"><img src="img/close.png" /></a>
<h4>Введите ваши контактные данные</h4>
<form id="formToSend">
<input id="fio" type="text" placeholder="Ваши фамилия и имя" class="" />
<input id="city" type="text" placeholder="Город" class="validate[required] text-input"/>
<input id="phone" type="text" placeholder="Контактный телефон" class="validate[required] text-input"/>
<input id="email" type="text" placeholder="Электронная почта" class="" />
<!--textarea id="question" placeholder="Адрес"></textarea-->
</form>
<button onclick="cart.sendOrder('formToSend,overflw,bsum');" href="#">Отправить заказ</button>
</div>
<!----------------------------------------------------->
<script>
var cart;
$(document).ready(function(){
// $('.item_img').loupe({ width: 200, height: 150, loupe: 'loupe'});
// Форма для валидации
$.validationEngine.defaults.scroll = false;
var contactForm = $('#formToSend');
// Подключаем корзину
cart = new WICard("cart");
var config = {'clearAfterSend':true, 'showAfterAdd':true, 'valudate':contactForm};
cart.init("basketwidjet", config);
});
document.addEventListener('visibilitychange', function(e) {
cart.init("basketwidjet", {});
}, false);
</script>
<center>
<!-- Yandex.Metrika counter -->
</center>
</body>
</html>
вот
$(document).ready(function(){
showCelebs();
var send = $( "#amount" ).val();
var container = $('#slider-range');
var max = $('#max').val();
var min = $('#min').val();
//http://ruseller.com/lessons.php?rub=32&id=1491
var rangeSlider = $('<div></div>')
.slider({
min: 0,
max: 100,
step: 10,
values: [min, max],
range: true,
animate: true,
slide: function(e,ui) {
$(this)
.parent()
.find('#min')
.val(ui.values[0]);
$( "#amount-first" ).val( ui.value );
$(this)
.parent()
.find('#max')
.val(ui.values[1]);
$( "#amount-two" ).val( ui.value );
showCelebs();
}
})
$('#price-range').after(rangeSlider).hide();
});
$('#slider').slider({
change: function(event, ui) {
alert(ui.value);
}
});
function showCelebs() {
min = $('#min').val();
max = $('#max').val();
$('.data tr').each(function() {
var price = parseInt($(this).find('td:last').text().substring(1));
if(price >= min && price <= max) {
$(this).fadeIn();
} else {
$(this).fadeOut();
}
});
}
