jQuery拖动滑块选取价格范围js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery拖动滑块选取价格范围js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery�϶�����ѡȡ�۸�Χ</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<style type="text/css">
.demo{width:760px; margin:50px auto}
.price_list{list-style:none}
.price_list li{float:left; line-height:22px; margin-right:10px; padding:2px 6px}
.price_list li.title{display:block; width:60px; height:60px;}
#custom{border:1px solid #d3d3d3; padding:0 16px 0 2px; background:url(images/icon.gif) no-repeat right 8px; position:relative;}
.custom_show{background:url(images/icon.gif) no-repeat right 18px;}
#show{width:100%; height:26px}
.input{width:66px; height:20px; line-height:20px; border:1px solid #d3d3d3}
.btn{width:54px; height:24px; line-height:24px; background:url(images/btn_bg.gif) repeat-x; border:1px solid #d3d3d3; cursor:pointer}
#slider_wrap{width:250px; height:80px; padding:10px; position:absolute; left:-1px; top:22px; border:1px solid #d3d3d3; background:#fff; display:none;}
#slider{width:230px; height:40px; margin:5px auto; border:none; background:url(images/line_bg.gif) no-repeat}
#range{width:220px; margin-left:4px}
#slider_wrap p{width:230px; margin:4px auto}
.ui-slider { position:relative; text-align:left;}
.ui-slider .ui-slider-handle {position:absolute; z-index:2; width:11px; height:14px; cursor: default; background:url(images/arr.gif) no-repeat }
.ui-slider .ui-slider-range {position:absolute; z-index:1; display:block; border:0; background:#f90}
.ui-slider-horizontal {height:10px; }
.ui-slider-horizontal .ui-slider-handle {top:14px; margin-left:0; }
.ui-slider-horizontal .ui-slider-range {top:20px; height:4px; }
.ui-slider-horizontal .ui-slider-range-min {left:0; }
.ui-slider-horizontal .ui-slider-range-max {right:0; }
</style>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type='text/javascript' src='js/jquery-ui.min.js'></script>
<script type="text/javascript">
$(function(){
	$("#show").click(function(){
		if($("#slider_wrap").css("display")=="none"){
			$("#slider_wrap").show();
		    $("#custom").css("background-position","right -18px");
		}else{
			$("#slider_wrap").hide();
		    $("#custom").css("background-position","right 8px");
		}
	});
	$("#range").slider({
		//range: true,
		min: 0,
		max: 10000,
		step: 500,
		values: [0, 3000],
		slide: function(event, ui){
			$("#start").val(ui.values[0]);
			$("#end").val(ui.values[1]);
		}
	});
	$("#btn_ok").click(function(){
		$("#slider_wrap").hide();
		$("#custom").css("background-position","right 8px");
		var start = $("#start").val();
		var end = $("#end").val();
		$("#show").html(start+"-"+end);
	});
});
</script>
</head>
<body>
<div id="main">
  <h2 class="top_title"><a href="#">jQuery+CSS�϶�����ѡȡ�۸�Χ</a></h2>
  <div class="demo">
    <p style="height:42px; line-height:32px">��ʾ��������Զ��塱���Կ���Ч����</p>
    <ul class="price_list">
      <li class="title">�۸�Χ��</li>
      <li><a href="#">3000Ԫ����</a></li>
      <li><a href="#">3000-4000Ԫ</a></li>
      <li><a href="#">4000-5000Ԫ</a></li>
      <li><a href="#">5000-6000Ԫ</a></li>
      <li><a href="#">6000-7000Ԫ</a></li>
      <li><a href="#">7000-8000Ԫ</a></li>
      <li><a href="#">8000-9000Ԫ</a></li>
      <li><a href="#">9000-10000Ԫ</a></li>
      <li><a href="#">10000Ԫ����</a></li>
      <li id="custom"><a href="javascript:;" id="show">�Զ���</a>
        <div id="slider_wrap">
          <div id="slider">
            <div id="range"></div>
          </div>
          <p>
            <input type="text" class="input" id="start" value="0"  />
            -
            <input type="text" class="input" id="end" value="3000" />
            <input type="button" class="btn" id="btn_ok" value="ȷ ��" />
          </p>
        </div>
      </li>
    </ul>
  </div>
</div>
</body>
</html>

CSS代码(main.css):

@charset "utf-8";/* CSS Document */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,sub,sup,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
a{color:#007bc4/*#424242*/
;text-decoration:none;}
a:hover{text-decoration:underline}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
body{height:100%;font:12px/18px "Microsoft Yahei",Tahoma,Helvetica,Arial,Verdana,"\5b8b\4f53",sans-serif;color:#51555C;background:#162934 url(../images/body_bg.gif) repeat-x}
img{border:none}
#header{width:980px;height:92px;margin:0 auto;position:relative}
#logo{width:240px;height:90px;background:url(../images/logo_demo.gif) no-repeat}
#logo h1{text-indent:-999em}
#logo h1 a{display:block;width:240px;height:90px}
#main{width:980px;min-height:600px;margin:30px auto 0 auto;background:#fff;-moz-border-radius:12px;-khtml-border-radius:12px;-webkit-border-radius:12px;border-radius:12px;}
h2.top_title{margin:4px 20px;padding-top:15px;padding-left:20px;padding-bottom:10px;border-bottom:1px solid #d3d3d3;font-size:18px;color:#a84c10;background:url(../images/arrL.gif) no-repeat 2px 14px}
#footer{height:60px;}
#footer p{padding:10px 2px;line-height:24px;text-align:center}
#footer p a:hover{color:#51555C}
#stat{display:none}
.google_ad{width:728px;height:90px;margin:50px auto}
.ad_76090,.ad_demo{width:760px;height:90px;margin:40px auto}
.demo_topad{position:absolute;top:15px;right:0px;width:640px;height:60px;}

附件:下载该文件资源,减少时间成本(增值服务)