利用jquery ui中的slider编写自定义样式的滑动条

先来看下实现效果，经测试火狐，IE9+，谷歌浏览效果一致。

因为实现借助于jquery ui，所以必须引入必要的文件，jquery.js，jquer ui.js和jquery ui.css。

然后如上图，html结构

        
0
        
100
    
    

        
选项1
        

    
    

        
选项2
        

    

处理一下样式

 .scale_num_box{
            overflow: hidden;
            margin-bottom: 25px;
        }
        .scale_num_box > div{
            float: left;
            color:#f00;
            font-size: 14px;
        }
        .scale_num_box > div:first-child{
            margin-left: 46px;
        }
        .scale_num_box > div:last-child{
            margin-left: 478px;
        }
        .option_select{
            zoom:1;
        }
        .option_select:after{
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .option_select > div{
            float: left;
            margin-bottom: 20px;
        }
        .option_select > div:first-child{
            margin-right: 20px;
            line-height: 18px;
            font-size: 14px;
            color:#333;
        }
        .range{
            width: 500px;
        }

接着就需要重置原有的jquery ui的默认样式了（很少有直接用默认样式的）

.ui-widget-header{
            background: transparent!important;
        }
        .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
            width: 10px;
            height: 17px;
            background: url("img/slide_block.png") no-repeat!important;
            border:0!important;
            outline: 0!important;/*谷歌和IE下回默认有outline，去掉*/
            top:0!important;
        }
        .ui-widget-content .ui-state-default:after{
            content: attr(data-content);
            display: block;
            width: 30px;
            text-align: center;
            font-size: 14px;
            color:#f00;
            position: relative;
            top:-20px;
            left:-10px;
        }
        .ui-slider-horizontal{
            height:1.1em!important;
        }
        .ui-widget-content{
            border: 0!important;
            background: url("img/range_slide_bg.png") repeat!important;
            background-size: auto 100%!important;
        }
        .ui-corner-all{
            border-radius: 0!important;
        }

然后就需要获取滑动值，并赋值给：after的content。由于：after为伪类，所以css中content的值为attr(data-content)，以便js赋值。

 $(function(){
            $(".range").slider({
                orientation:"horizontal",
                range:"min",
                max:100,
                value:0,
                change:function(){
                    $(this).find(".ui-state-default, .ui-widget-content .ui-state-default:after").attr("data-content",$(this).slider("value"));
                }
            })
        })

补充一下样式表中需要的图片

背景图   

滑块   

以上就可以做出自己想要的滑动样式了。