我们设置了滑块的最大值max为10000,最小值min为0,滑块每次滑动的距离step是500,默认初始范围values为0到3000。当滑动滑块的时候,赋值给#start和#end两个文本框。更多参数设置和方法调用请查看jquery ui 官方网站:
最后,当我们选定好价格范围后,点击“确定”按钮,将关闭滑块选择框,改变“自定义”状态,代码如下:
$("#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); });
这样,我们就可以看到我们想要的效果了,快去动手试试吧。