jquery - jQuery range slider with incline plane?

Question

Any ideas on how to style a range slider to do something like this where the highlight fill increases along an incline as you drag the slider (colors/design are example only):

Answer 1

刚刚为你做了这个：小提琴

HTML

<div class="content"></div>
<div id="slider"></div>

CSS

.content {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 0 0;
    margin-top:100px;
    border-color: transparent transparent #007bff transparent;
}
#slider {
    width: 500px;
}

JS

$('#slider').slider({
    min: 0,
    max: 100,
    slide: function( event, ui ) {
        var width = (ui.value) + 'px ' + (ui.value * 5) + 'px';
        var marginTop = (100 - ui.value) + 'px';
        $('.content').css({
            borderWidth: '0 0 ' + width,
            marginTop: marginTop
        });
    }
});