带倾斜平面的jQuery范围滑块？

Question

有关如何设置范围滑块的样式以执行此类操作的任何想法，当您拖动滑块时，高光填充沿着倾斜度增加（颜色/设计仅为示例）：

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