jQuery插件滑块实现拖动滑块的范围来选择价格范围。

在一些产品报价网站上，我们需要给用户提供一系列的价格范围来过滤，我们在用户筛选范围之外增加了一个定制的价格范围，为用户提供了更多的选择。
jQuery UI有一个滑块插件，这是一个很好的plug-in.to拖动滑块实现滑块拖动，你需要下载以下JS页面头之间。

当然，如果您考虑到项目的效率，可以将上面的JS压缩成js，这是我们在大型Web应用程序项目中应该考虑的。

你可以下载相关的js到jQuery官方网络。

接下来，我们构建主要的HTML代码：
价格范围：
不足3000元
3000-4000元
4000-5000元
5000-6000元
6000-7000元
7000-8000元
8000-9000元
9000-10000元
超过10000元
习俗

—
价格范围是由一系列的李，最后，我们给它一个集ID的自定义，包括div # slider_wrap需要显示滑块的选择，当然，当然，DIV默认是隐藏的，我们需要使用CSS来实现外观效果。
CSS
通过CSS，页面看起来很漂亮：

列表样式：没有。price_list { }
。price_list李{浮动：左；线高度：22px；右边距：10px；填充：2px 6px }
。price_list李。标题{显示：块；宽度：60px；身高：60px；}
#自定义{ border: 1px solid # d3d3d3；填充：0 16px 0 2px；背景：URL（图像/图标，GIF）
没有重复的正确位置：8px；相对；}
。custom_show { background: url（图像/图标，GIF）没有重复正确的18px；}
#显示{宽度：100%；高度：26px }
输入{宽度：66px；高度：20px；线高度：20px；border: 1px solid # d3d3d3 }
。- {宽度：54px；身高：24px；线高度：24px；背景：URL（图像/ btn_bg .webp）
repeat-x；边框1px solid # d3d3d3；鼠标指针}
# slider_wrap {宽度：250px；高度：80px；padding: 10px；位置：左：- 1px绝对；
上图：22px；边框1px solid # d3d3d3；背景：# FFF；显示：无；Z指数：1001 }
#滑块{宽度：230px；身高：40px；保证金：5px汽车；边界：无；背景：
URL（图像/ line_bg .webp）不重复}
#范围{宽度：220px；margin-left: 4px }
# slider_wrap p {宽度：230px；保证金：4px汽车}
关键是弹出的div用于显示滑动选择范围的CSS，并且显示层的位置由绝对和相对定位决定。

表示层中滑块插件的CSS来自jQuery自己的CSS，我做了一些小修改。

UI滑块{位置：相对；文本对齐：左；}
。ui-slider.ui-slider-handle {位置：绝对；Z指数：2；宽度：11px；身高：14px；
光标：默认；背景：URL（图像/ arr.webp）不重复}
。ui-slider.ui-slider-range {位置：绝对；Z指数：1；显示：边界：0块；
背景：# F90 }
。UI滑块横向{身高：10px；}
。ui-slider-horizontal.ui-slider-handle {顶：14px；margin-left: 0；}
。ui-slider-horizontal.ui-slider-range {顶：20px；身高：4px；}
。ui-slider-horizontal.ui-slider-range-min {左：0；}
。ui-slider-horizontal.ui-slider-range-max {右：0；}
jQuery
首先，我们需要单击单击自定义栏时弹出的图层，单击自定义，显示下拉图层，然后更改箭头样式。当再次单击时，下拉图层将被隐藏。

$（函数（）{（））
$（#秀），Click（function（）{）
如果（$（# slider_wrap）。Css（显示）= =无）{
$（# slider_wrap ）显示（）；
$（#习俗）。Css（背景位置
其他{ }
$（# slider_wrap ）藏（）；
$（#习俗）。Css（背景位置
}
}）；
}）；
有些人可能想知道为什么不直接使用切换而不是单击。我试过了，但是在那之后，我们还需要点击下一层来确定隐藏的下拉图层。如果你使用切换方法，当你点击确认按钮时，你需要两个点来拉起下拉图层。所以我选择了点击法和判断法来解决这个问题。

然后调用滑块插件：

$（#范围）。Slider（{
最小值：0，
马克斯：10000，
步骤500，
值：{ 0, 3000 }，
幻灯片：功能（事件，用户界面）{
$（#开始）。瓦迩（UI。值{ 0 }）；
$（#结束），瓦迩（UI。值{ 1 }）；
}
}）；
滑块的最大值是马克斯10000，最小值是0分钟，滑行距离是500，和值的默认初始的范围是0到3000。当滑动滑块，两个文本框被分配到#开始和# end.for更多的参数设置和方法的调用，看看jQuery UI官方网站：

最后，当我们选择了价格范围，我们点击确定按钮，滑块选择框将关闭，以改变自定义状态。代码如下：

$（# btn_ok）。Click（function（）{）
$（# slider_wrap ）藏（）；
$（#习俗）。Css（背景位置
VaR的开始=（美元#开始）瓦迩（）；
var = $（#结束），瓦迩（）；
$（#秀），Html（开始+-+端）；
}）；
这样，我们就能看到我们想要的效果，去尝试一下。

以上是本文的全部内容，希望大家能喜欢。