自定义(滑动条)input[type="range"]样式

html布局：

<div>
    <input type="range" value="0" id="range">
    <input type="number" class="ranger-num" value="0" id="text">
</div>

css代码：

       #range {
            width: 170px;
            height: 6px;
            background-color: #e5e5e5;
            border-radius: 3px;
        }
        #text {
            width: 49px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            border-radius: 6px;
            border: solid 1px #dcdcdc;
            margin-left: 20px;
        }
        /* 滑动条 */
        input[type='range'] {
            margin-top: 8px;
            outline: none;
            -webkit-appearance: none;
            /*清除系统默认样式*/
            width: 56% !important;
            background: -webkit-linear-gradient(#00c3d5, #00c3d5) no-repeat, #ddd;
            background-size: 0% 100%;
            /*设置左右宽度比例*/
            height: 3px;
            /*横条的高度*/
        }
        /*拖动块的样式*/
        input[type='range']::-webkit-slider-thumb {
            -webkit-appearance: none;
            /*清除系统默认样式*/
            height: 16px;
            /*拖动块高度*/
            width: 16px;
            /*拖动块宽度*/
            background: #fff;
            /*拖动块背景*/
            border-radius: 50%;
            /*外观设置为圆形*/
            border: solid 1px #ddd;
            /*设置边框*/
        }

js代码如下：

<script>
        $(function () {
            $('#range').change(throttle(foo, 2000))
            $('#text').change(throttle(fooText, 2000))

            function foo() {
                var value = $('#range').val()
                var valStr = value + '% 100%'
                $('#text').val(value)
                $('#range').css({
                    'background-size': valStr
                })
            }

            function fooText() {
                var value = $('#text').val()
                var valStr = value + '% 100%'
                $('#range').val(value)
                $('#range').css({
                    'background-size': valStr
                })
            }
            // 函数节流
            function throttle(func, delay) {
                var timer = null
                var startTime = Date.now()
                return function () {
                    var curTime = Date.now()
                    var remaining = delay - (curTime - startTime)
                    var context = this
                    var args = arguments

                    clearTimeout(timer)
                    if (remaining <= 0) {
                        func.apply(context, args)
                        startTime = Date.now()
                    } else {
                        timer = setTimeout(func, remaining)
                    }
                }
            }
        })
    </script>

效果如下：