如何设置一个好看的进度条，支持回显默认值

项目需要，在网上 招了一个进度条，但是甲方粑粑觉得视觉效果不好，我。。。没办法，谁让人家是甲方呢，我改，经过前段同事的帮助，终于搞出来了一个相对来说还阔以的进度条，记录下来，希望有所帮助。特别感觉前辈们的分享，如有错误，敬请指教

第一步：先创建div

<div style="300px;">
            <div class="jinduCoat">
                <p id="default" value="20">默认值：20</p>
                <span class="bars_10" id="max" style="float: right; font-weight: bold;" value="50">最大</span>
                <span class="bars_10" id="min" style="font-weight: bold;" value="0">最小</span>
                <div id="jindutiao">
                    <div class="lang"></div>
                    <input type="range" value="0" id="range" style=" 100%;">
                    <input type="hidden" value="" id="current">
                </div>
                <p style="color: #333; font-size: 16px; text-align: center; margin-top: 20px; margin-bottom: 0;">
                            当前值：<span id="title0">20</span>
                        </p>
            </div>
        </div>

第二步：设置css样式和js

#range {
    background-color:transparent;
    -webkit-appearance: none;
    width: 300px;
    border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
    
}
#range::-webkit-slider-thumb {
    -webkit-appearance: none;
}  
#range::-webkit-slider-runnable-track {
    height: 10px;
    background: transparent;
    border: 0;
    /* border-radius: 10px; 将轨道设为圆角的 */
    /* box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; */ /*轨道内置阴影效果*/
}
#range:focus {
    outline: none;
}
#range::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 25px;
    width: 25px;
    margin-top: -20px; /*使滑块超出轨道部分的偏移量相等*/
    background: #005caf; 
    border-radius: 50%; /*外观设置为圆形*/
    border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
    box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
}

#jinduCoat {
    height: .52rem;
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-bottom: .1rem;
}
#jindutiao {
    margin-top: .16rem;
    height: 100%;
    border-radius: 1rem;
    background-color: #f0f0f0;
    height: 10px;
    position: relative;
}
.lang {
    margin-bottom: -5px;
    margin-top: 10px;
    width: 0;
    height: 10px;
    border-radius: 1rem;
    background: linear-gradient(to right, RGBA(0, 92, 175, .8),
        RGBA(0, 92, 175, 1));
    -webkit-background: linear-gradient(to right, RGBA(0, 92, 175, .5),
        RGBA(0, 92, 175, 1));
}

$.fn.RangeSlider = function(cfg){
            this.sliderCfg = {
                min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null, 
                max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
                step: cfg && Number(cfg.step) ? cfg.step : 1,
                callback: cfg && cfg.callback ? cfg.callback : null
            };
        
            var $input = $(this);
            var min = this.sliderCfg.min;
            var max = this.sliderCfg.max;
            var step = this.sliderCfg.step;
            var callback = this.sliderCfg.callback;
            $('.lang')[0].style.width = 0;
            console.log(this);
            $input.attr('min', min)
                .attr('max', max)
                .attr('step', step);
            $input.bind("input", function(e){
                $input.attr('value', this.value);
                //$input.css( 'background-size',this.value*100/max + '% 100%' );
                //$input.css( 'background', 'linear-gradient(to right, #059CFA, #059CFA ' + this.value*100/max + '%, white)' );
                //console.log(this.value*100/max);
                $('.lang')[0].style.width = (this.value-min)*100/(max-min) + '%';
                $("#range").css({"margin-left":0});
                $("#title0").html(this.value);
                if ($.isFunction(callback)) {
                    callback(this);
                }
            });
        };

第三步：写js

//调用方法，动态生成进度条
        var min = $("#min").attr("value");
        var max = $("#max").attr("value");
        var current = $("#default").attr("value");
        $('#range').RangeSlider({
            min : min,
            max : max,
            step : (max - min) / 300,
            callback : change
        });
        var change = function($input) {
        }
        var now = $("#title0").text();
        if(current == now){
            //开始设置宽度
            $('.lang')[0].style.width = (current-min )*100/(max-min) + '%';
            $("#range").css({"margin-left":(current-min)*100/(max-min) + '%'});
        }else{
            //开始设置宽度
            $('.lang')[0].style.width = (now-min)*100/(max-min) + '%';
        }

至此一个比较好看的进度条就形成了，还能回显默认值。