range slider 多个范围滑动条

因项目需求，网上找的大多是单个，类似h5 input range ，或者是双个 选一个最小或最大值的范围内 ，类似ion.range .

所以写了一个多范围滑动条.

利用了h5和canvas 的结合

实例化：

  var _range = new DxRange('#rangeS', {
                step: 1,
                splits: [
                    { value: 60, title: "60平", offset: [-15,0]},
                    { value: 80, title: "80平", offset: [-15, 0] },
                    { value: 100, title: "100平", offset: [-20, 0] },
                    { value: 150, title: "150平", offset: [-20, 0] },
                    { value: 200, title: "200平", offset: [-20, 0] },
                    { value: 250, title: "250平", offset: [-20, 0] },
                    { value: 300, title: "300平", offset: [-20, 0],width:'80px'}
                ],
                onRangeChange: function (e)
                {
                    console.log("onRangeChange:" + e.selectValue);
                },
                onRangeMove: function (e) {
                    console.log("onRangeMove:" + e.selectValue);
                }
            });

大概效果图

60平 180平 360平

    
    

    


    

    





    







    

        

            60平
            180平
            360平