首页 > 代码库 > easyUI制作slider小滑块,可拖动和精确输入

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 = http://www.mamicode.com/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");

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

 

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