CSS+JS的拖动滑块实现价格区间搜索效果

weixin_30262255

于 2015-05-26 10:25:00 发布

阅读量874

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/youtianxia/p/4529930.html

版权

本文介绍如何通过CSS和JavaScript技术实现一个价格区间搜索的拖动滑块功能。用户可以通过拖动滑块来设定价格范围，进行更精确的产品搜索。详细步骤和代码示例可在原文链接中查看。

摘要由CSDN通过智能技术生成

<!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=utf-8" />
    <title>CSS+JS的拖动滑块实现价格区间搜索效果丨石家庄地毯|河北冷风机厂家</title>
    <style>
    #dragbar{
    position:relative; width:170px; top:26px; float:left;}
    #long_bar{
     height:0.6em; border:1px solid #aaa; border-radius:4px;}
    #small_bar{
     background:#ccc; position:absolute; z-index:1; top:1px; height:0.6em; line-height:0.6em; overflow:hidden;}
    #long_bar .btn{
     width:1.2em; z-index:2; position:absolute; height:1.2em; cursor:pointer; top:-0.3em; margin-left:-0.6em; background:#D72D2E; border-radius:4px; border:

最低0.47元/天解锁文章

weixin_30262255

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS+JS的拖动滑块实现价格区间搜索效果

<!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&g...
复制链接

扫一扫