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

时间:2014-02-23 23:18:47

标签: jquery jquery-ui slider range rangeslider

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

enter image description here

1 个答案:

答案 0 :(得分:2)

刚刚为你做了这个: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
        });
    }
});