自定义范围输入以指示进度

【问题标题】：Customize range input to indicate progress自定义范围输入以指示进度
【发布时间】：2018-01-07 10:57:57
【问题描述】：

我有一个range input：

<input id="progress" type="range" min="0" max="100" value="0" title="">

现在我想在图标的左侧添加一个color。

有点像audio tag 在Chrome 中的样子：

但我完全不知道该怎么做。

或者如果它甚至可以使用css 或javascript 来实现。

【问题讨论】：

标签： javascript html input styles range

【解决方案1】：

你可以使用 Jquery 做这样的事情：

$('input[type="range"]').change(function () {
    var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
    
    $(this).css('background-image',
                '-webkit-gradient(linear, left top, right top, '
                + 'color-stop(' + val + ', #000080), '
                + 'color-stop(' + val + ', #C5C5C5)'
                + ')'
                );
});

input[type="range"]{
    -webkit-appearance: none;
    -moz-apperance: none;
    border-radius: 6px;
    height: 6px;
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0.15, #000080),
        color-stop(0.15, #C5C5C5)
    );
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background-color: #E9E9E9;
    border: 1px solid #CECECE;
    height: 15px;
    width: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="1" max="100" step="1" value="15">

【讨论】：

像魅力一样工作。太好了。