{openzc:ajax filename="slideprice1"}
 <div class="mail-panel">
 	<div class="mail-sidebar pos-relative" style="min-height:1000px;">
		<div class="mfilter-heading">
		  <div class="mfilter-heading-content">
			<div class="mfilter-heading-text"> <span>Slide Price</span> </div>
			<i class="mfilter-head-icon"></i> </div>
		</div>
		<div class="mfilter-content-opts">
		  <div class="mfilter-opts-container">
			<div class="mfilter-content-wrapper">
			  <div class="mfilter-options">
				<div class="mfilter-option mfilter-price">
			  	<form id="slidePrice" class="openzc-form">
		  	  	  <input type="hidden" name="action" value="slidePrice"/>
			  	  <input type="hidden" name="range" id="slide_range" value="{openzc:filter item='slideprice' field='range'/}"/>
			  	  <input type="hidden" name="reload" value="slideprice1,slideprice_js"/>
				  <div class="mfilter-price-inputs">
				    {openzc:filter item="price" slide="true"}
					[field:symbol/]
					<input id="mfilter-opts-price-min" type="text" class="form-control" value="[field:slide_min/]" /> 
					- [field:symbol/]
					<input id="mfilter-opts-price-max" type="text" class="form-control" value="[field:slide_max/]"/>
					{/openzc:filter}
				  </div>
				 </form>
				  <div class="mfilter-price-slider">
					<div id="mfilter-price-slider"></div>
				  </div>
				</div>
			  </div>
			</div>
		  </div>
		</div>
 	</div>
 	<div id="mailBodyList" class="mail-body {openzc:if IS_MOBILE==false}pos-absolute t-0{/openzc:if}">
 		<div class="mail-body-content ht-auto">
             <div class="mail-navbar">
                <div class="align-items-center">
                  	<!--自定义分页信息内容 详细参见 { openzc:pagelist } 使用教程-->
                  	<h6 class="mail-from">{openzc:pagelist custom="text"/}</h6>
                </div>
                	<!--产品列表排序和产品显示数量 详细参见 { openzc:listbar } 使用教程-->
                <div {openzc:if IS_MOBILE}class="d-none"{/openzc:if}>
					Order by :
					<select class="custom-select wd-200 ml-2 mr-3 openzc-select" data-action="autoLink">
						{openzc:listbar item="orderby" flag="sell,price,view,name"}
							<option value="[field:orderby_link/]" {openzc:if $field['status']=="active"}selected=""{/openzc:if}>[field:orderby_name/]</option>
						{/openzc:listbar}
					</select>
					Page Limit :
					<select class="custom-select wd-200 ml-2 openzc-select" data-action="autoLink">
						{openzc:listbar item="limit"}
							<option value="[field:limit_link/]" {openzc:if $field['status']=="active"}selected=""{/openzc:if}>[field:limit_name/]</option>
						{/openzc:listbar}
					</select>
            	</div>
             </div>
             <div class="mail-msg ps ps--active-y">
             	<div class="row mg-b-20">
				{openzc:if $listCount>0}
				{openzc:list pagesize="12" imgsizer="190,245"}
				<div class="col-6 col-md-3 col-lg-3 tx-center">
					<div><img src="[field:products_image/]" style="max-width:100%"/></div>
					<div><a class="tx-light tx-color-01 mg-b-0" href="[field:products_link/]">[field:products_name/]</a></div>
					<span class="p-2">[field:products_price/]</span>
				</div>
				{/openzc:list}
				</div>
				{/openzc:if}
             	<!--分页调用--详细参考pagelist标签的使用教程-->
         
             	{openzc:if $listCount>0}
             	<nav aria-label="Page navigation example" class="mg-t-20 mg-b-20">
             		<ul class="pagination justify-content-center pagination-circle">
					{openzc:pagelist listitem="prev,list,next" listsize="5"/}
					</ul>
				</nav>
				{else}
				<nav aria-label="Page navigation example">
					<p class="pagination justify-content-center ">
					The current category is empty.
					</p>
				</nav>
				{/openzc:if}
             	
             </div>
        </div>
    </div>
</div>
{/openzc:ajax}
<!------------价格滑动相应的jquery也需要创建ajax重载区块--------------->
{openzc:ajax filename="slideprice_js"}

<script>
	var sliderbar="#mfilter-price-slider";
	var sliderhandle="#mfilter-price-slider .ui-slider-handle";
	var input_min="#mfilter-opts-price-min";
	var input_max="#mfilter-opts-price-max";
	var input_range="#slide_range";
		$(sliderbar).slider({
			range: true,
			min: {openzc:filter item="slideprice" field="min"/},
			max: {openzc:filter item="slideprice" field="max"/},
			values: [{openzc:filter item="slideprice" field="slide_min"/}, {openzc:filter item="slideprice" field="slide_max"/}],
			slide: function slide(event, ui) {
				$(input_min).val(ui.values[0]);
				$(input_max).val(ui.values[1]);
			}
		});
		$(sliderhandle).mouseup(function(){
			var min=$(sliderbar).slider("values", 0),max=$(sliderbar).slider("values", 1);
			$("#slidePrice input[name='range']").val(min+","+max);
			$("#slidePrice").submit();
		});
</script>
{/openzc:ajax}