带有斜面的 jQuery 范围 slider ？

Question

有关如何设置范围 slider 样式以执行类似操作的任何想法，当您拖动 slider 时，突出显示填充会沿倾斜增加(颜色/设计仅作为示例):

Answer 1

刚刚为您做了这个:FIDDLE

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