easyUI制作slider小滑块，可拖动和精确输入

Posted 2020-09-06 白杨-M

借助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");

到这里，一个精美的滑块就制作出来了~~~~