easyUI制作slider小滑塊，可拖動和精確輸入

借助easyUI制作、完善slider小滑塊。

可拖動、和在右邊輸入框精確輸入

 

效果圖：

html代碼：

　　　　　　　　　　　　<div class="text_fl" >亮度設置:</div>
                    <div class="logo-1 fl"></div>
                    <div class="text_fl width_130" >
                        <div class="swip_box" >
                            <div id="ssa_add"></div>
                            <div class="ssa"></div>
                        </div>
                    </div>
                    <div class="num_box clearfix" >
                        <div class="box1">
                            <input id="liangdu" class="fl" type="text" value="" />
                            <div class="num-deng fl">%</div>
                        </div>
                    </div>

 

JS代碼：

//滑塊方法封裝
function sliderfun(s1,s2,s3){
    var defaultValue = 80;//默認滑動位置
    var sliderLength = 130;//滑塊長度
    $(s1).slider({
        mode: 'h',
        value : defaultValue,
        onChange:function(newValue,oldValue){
            $(s2).width(newValue*sliderLength/100);
            $(s3).val(newValue);
        }
    });

    $(s2).width(defaultValue*sliderLength/100);
    $(s3).empty().val(defaultValue);

    $(s3).on('keyup',function(){
        var val = $(this).val();
        if(val==''||val==null||val==undefined||isNaN(val)){
            val=0;
        }
        var num = parseInt(val);
        if(num>100){
            num=100;
        }
        $(this).empty().val(num);

        var width = num*sliderLength/100;
        $(s1).slider('setValue', num);
        $(s2).css('width', width);
    });
}

/*亮度滑塊*/
sliderfun(".ssa","#ssa_add","#liangdu");

到這里，一個精美的滑塊就制作出來了~~~~