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

Question

我有range input：

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

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

有点像audio tag在Chrome看起来的样子：

但我绝对不知道该怎么做。

或者甚至可以使用css或javascript进行此操作。

Answer 1

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

＆＃13;

＆＃13;

$('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)'
                + ')'
                );
});

＆＃13;

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;
}

＆＃13;

<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">

＆＃13;

＆＃13;

＆＃13;