bootstrap slider滚动条效果

效果：

        用bootstrap 的slider实现拉条的效果

效果

 

html代码：

<div class="item"><span>一号灯&nbsp;&nbsp;</span>
        <a class = "btn btn-xs" title="一号灯"><div id="lamp_close"  value="1"></div></a>
        <input id="ex1" type="text" data-slider-id="ex1Slider" class="span2" value="" data-slider-min="60" data-slider-max="254" data-slider-step="1" data-slider-value="0"/>
    </div>

jquery：

<script>
$(function () {
        var val = $(".btn-xs").find('div').attr('value');
        if(val == 1){
            $('#ex1').slider({
            }).on('slideStop', function (e) {//点击或拉动滚动条后，获取停止时滚动条参数传送到控制器
                //获取新值
                console.log(e.value);
                num = e.value;
                $.ajax({
                    url : "index/turnon",//具体的url 根据项目的路径自己调下
                    type : 'post',
                    data : {"eid":id,"num":num,"status":status},
                    dataType : 'json',
                    async : false,
                    success : function(date){
                        if(date){
                            console.log(date.result);
                            //alert("操作成功");
                        }
                    },
                    error : function(){
                        //alert("操作失败");
                    }
                });
            });
        }else{
            $('#ex1').slider({
                enabled:false//灯未亮时，无法操作滚动条
            });
        }


    })
</script>