JQUERY UI Slider具有圖像背景並具有快速響應

Question

我想要實現的是：

當滑塊位於100％以外的任何給定點時：

要求是：

• 當箭頭沿着滑塊移動時，左側的漸變不得根據可用的寬度而變化。 它應顯示與上述兩個示例完全相同的漸變量。
• 滑塊必須完全響應。 這意味着，如果滑塊太大，並且如果使用漸變作為背景圖像，則該圖像必須占據整個滑塊，而不是在圖像的100％寬度處重復或停止並正確獲取背景顏色。 當滑塊縮小時，同樣適用。
• 滑塊中的所有元素（包括圓形箭頭必須是自適應的）。

到目前為止，我嘗試使用背景圖像屬性來執行此操作，但是在響應性方面面臨上述限制。

HTML：

<div id="slider-range-min"></div>

CSS：

body {    
    padding:5vh;
}

#amount {
    border: 0;
    color: #f6931f;
    font-weight: bold;
}

.ui-slider-horizontal {
    height: 8vh;
}

.ui-widget-header {
    border: 1px solid #aaaaaa;
    background: #cccccc url(http://s13.postimg.org/e9jwzqsqv/gradient.png) no-repeat left top !important;
    color: #222222;
    font-weight: bold;
    height: 15px;
    width: 20vh;
    position: absolute;
}

.ui-widget-content {
    border: 1px solid #aaaaaa;
    background: #f1f1f1 url("images/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x;
    color: #222222;
}

.ui-slider-horizontal .ui-slider-handle {
    top: 0.6vh;
}

JS：

$(function () {
    $("#slider-range-min").slider({
        range: "min",
        value: 37,
        min:   30,
        max:   50,
        slide: function (event, ui) {
            $("#amount").val("$" + ui.value);
        }
    });
    $("#amount").val("$" + $("#slider-range-min").slider("value"));
});

的jsfiddle

Answer 1

查看CSS的結尾並自定義方式：

.ui-slider-handle { height:101%!important; margin-top:-0.75%}

---

關於背景：

采用 ：

$( window ).resize(function() {
   /*Here, you have to update the gradient width*/
   $("#my_slider.ui-widget-header").width(/* here*/);
   /*or other properties*/
   $("#my_slider.ui-widget-header").css("...prop...","...value...");
});

簡而言之，CSS不足以使其具有100％的響應能力。 您必須使用一些JQuery。