价格筛选条

所属分类:媒体-滑块和旋转

 3552  23  查看评论 (9)
价格筛选条 ie兼容6

1.所需引用文件:style.css(样式可自定义)、slider.js(价格拖动筛选封装函数)

2.配置js:

$("#price-range").slider({
    unit: "万",
    beyondMax: true,
    beyondMin: true,
    firstWidth: 34,
    lastWidth: 23,
    scale: [
        {
            key: 0,
            value: [1, 1, 1]
        },
        {
            key: 5,
            value: [1, 1, 1, 1, 1]
        },
        {
            key: 10,
            value: [1, 1, 1, 1, 1]
        },
        {
            key: 15,
            value: [1, 1, 1, 1, 1]
        },
        {
            key: 20,
            value: [1, 1, 1, 1, 1]
        },
        {
            key: 25,
            value: [1, 1, 1, 1, 1]
        },
        {
            key: 30,
            value: [1, 1, 1, 1, 1]
        },
        {
            key: 35,
            value: [3, 2, 5, 3, 2]
        },
        {
            key: 50,
            value: [5, 5, 5, 5]
        },
        {
            key: 70,
            value: [10, 10, 10]
        },
        {
            key: 100,
            value: 0.5
        },
        {
            key: 110
        }
    ]
    })
.on("changed", function(e, args) {
    var min = args.value.leftValue,
        max = args.value.rightValue;
    console.log(min,max);
    // location.href = '/car/' + min + '_' + max + '-0.0_0.0-0-0-0-0-0-0-0-0/';
});
$("#price-range").data("slider").setRange({
    leftValue: 0,
    rightValue: 110
});
相关插件-滑块和旋转

轮播切换图片

随箭头点击,四张图片动态移动
  滑块和旋转
 15034  167

移动端左右滑动插件

移动端左右滑动插件
  滑块和旋转
 25409  89

css3滑动按钮

css3滑动开关按钮效果,带回调函数
  滑块和旋转
 5103  32

jquery无缝滚动切换

jquery 实现无缝滚动左右滚动(左右可点击的箭头切换div位置)
  滑块和旋转
 15030  58

讨论这个项目(9)回答他人问题或分享插件使用方法奖励jQ币

    E、E、 0
    2018/4/12 18:03:36
    大于500的区间的 时候不能2个值不能重合希望改进!
        许尊少0
        2018/4/16 10:02:50
        您好,没看懂您描述的问题,您可以描述的再详细点
    回复
    ? 0
    2018/1/4 10:35:08

    很好的一个插件

    回复
    许尊少 1
    2017/11/22 10:05:11

    温馨提示:此插件不是很完善,可自己调试使用,如有任何问题留言,必及时回,由于此插件开头是0~5,那么将js中的scale的第一组value设置成5个1,如下所示:

    {
        key: 0,
        value: [1, 1, 1,1 , 1]
    }

    然后开头和尾部的长度进行调试

    firstWidth: 34,
    lastWidth: 23,
    回复
    回到过去 0
    2017/11/21 22:29:30
    手册貌似少了点点
        许尊少1
        2017/11/22 10:01:51

        首端和尾部的长度可通过这个属性进行设置:

        firstWidth: 34,
        lastWidth: 23,
    回复
    七发左轮 0
    2017/11/6 13:50:10

    很好

        ?0
        2018/1/4 10:38:35

        我也觉得不错

    回复
    豆包 0
    2017/11/4 14:59:27
取消回复