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

最新推荐文章于 2025-03-18 09:03:01 发布

weixin_34090562

最新推荐文章于 2025-03-18 09:03:01 发布

阅读量166

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/baiyangyuanzi/p/6610620.html

版权

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