Помогите с JQ слайдером
Всем привет!
Пишу фильтр по цене(диапазон цен) для сайта. Код фильтра <div class="box"> <div class="box-heading">Диапазон цен</div> <form class="fromtofilter" action="#" method="GET"> <div class="formCost"> <label for="minCost">от</label><input type="text" id="minCost" value="0"/> <label for="maxCost">до</label><input type="text" id="maxCost" value="1000"/> </div> <div class="sliderCont"> <div id="slider"></div> </div> </form> </div> Использую библиотеку jquery.ui-slider.js и вот такой скрипт взял с одного сайта jQuery(document).ready(function(){ /* слайдер цен */ jQuery("#slider").slider({ min: 0, max: 1000, values: [0,1000], range: true, stop: function(event, ui) { jQuery("input#minCost").val(jQuery("#slider").slider("values",0)); jQuery("input#maxCost").val(jQuery("#slider").slider("values",1)); }, slide: function(event, ui){ jQuery("input#minCost").val(jQuery("#slider").slider("values",0)); jQuery("input#maxCost").val(jQuery("#slider").slider("values",1)); } }); jQuery("input#minCost").change(function(){ var value1=jQuery("input#minCost").val(); var value2=jQuery("input#maxCost").val(); if(parseInt(value1) > parseInt(value2)){ value1 = value2; jQuery("input#minCost").val(value1); } jQuery("#slider").slider("values",0,value1); }); jQuery("input#maxCost").change(function(){ var value1=jQuery("input#minCost").val(); var value2=jQuery("input#maxCost").val(); if (value2 > 1000) { value2 = 1000; jQuery("input#maxCost").val(1000)} if(parseInt(value1) > parseInt(value2)){ value2 = value1; jQuery("input#maxCost").val(value2); } jQuery("#slider").slider("values",1,value2); }); }); Сейчас минимальная цена в инпуте minCost - 0, в maxCost - 1000 Мне нужно чтобы эти значения брались из инпутов которые возвращаются PHP скриптом при переходе в категорию товаров. <input type="hidden" name="minCostCat" value="500"> <input type="hidden" name="maxCostCat" value="15790"> Собственно просьба, помогите подставить эти значения в инпуты minCost и maxCost чтобы пользователь выбирал именно с помощью бегунка именно из этих значений. Спасибо! |
Alex57B,
:cray: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>slider demo</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css"> <style> #slider { margin: 10px;width : 500px; height: 8px } .ui-slider-handle{border-radius:50%; position: relative; font-size: 14px; display: block; } .ui-slider-horizontal .ui-slider-handle{top:-0.4em} </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> </head> <body> <input type="hidden" name="minCostCat" value="500"> <input type="hidden" name="maxCostCat" value="15790"> <div class="box"> <div class="box-heading">Диапазон цен</div> <form class="fromtofilter" action="#" method="GET"> <div class="formCost"> <label for="minCost">от</label><input type="text" id="minCost" /> <label for="maxCost">до</label><input type="text" id="maxCost" /> </div> <div class="sliderCont"> <div id="slider"></div> </div> </form> </div> <script> jQuery(document).ready(function(){ var min_max = [+jQuery("[name='minCostCat']").val(),+jQuery("[name='maxCostCat']").val()] /* слайдер цен */ jQuery("#slider").slider({ min: min_max[0], max: min_max[1], values: min_max, range: true, change: function(event, ui) { jQuery("input#minCost").val(jQuery("#slider").slider("values",0)); jQuery("input#maxCost").val(jQuery("#slider").slider("values",1)); }, slide: function(event, ui){ jQuery("input#minCost").val(jQuery("#slider").slider("values",0)); jQuery("input#maxCost").val(jQuery("#slider").slider("values",1)); } }); $("#slider").slider( "option", "values", min_max ); jQuery("input#minCost").change(function(){ var value1=+jQuery("input#minCost").val()||min_max[0]; var value2=+jQuery("input#maxCost").val()||min_max[1]; if(value1 > value2){value1 = value2}; if(value1 < min_max[0]){value1 = min_max[0]}; jQuery("input#minCost").val(value1); jQuery("#slider").slider("values",0,value1); }); jQuery("input#maxCost").change(function(){ var value1=+jQuery("input#minCost").val()||min_max[0]; var value2=+jQuery("input#maxCost").val()||min_max[1]; if (value2 > min_max[1]) { value2 = min_max[1]}; if(value1 > value2){value2 = value1;} jQuery("input#maxCost").val(value2); jQuery("#slider").slider("values",1,value2); }); }); </script> </body> </html> |
рони,
Спасибо! Я решил уже по другому. Из PHP напрямую передал значения. Смайлик в тему, истинно отражает мои знания в Javascript :) |
Часовой пояс GMT +3, время: 03:07. |