像這樣的jQuery UI滑塊樣式

Question

我需要使滑塊看起來像這樣：

如您所見，滿容量（亮線）有一個限制（暗線）。

到目前為止，我有以下代碼：

<p>
  <label for="amount">Amount:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>

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

---

var myMax = 500;
$( "#slider" ).slider({
    range: "min",
    value: 300,
    min: 1,
    max: 2000,
    create: function(event, ui) {
        $( "#amount" ).val(ui.value);
    },
    slide: function(event, ui) {
        if(ui.value > myMax) {
            return false;
            ui.value = myMax;
        }
        $( "#amount" ).val(ui.value);
    }
});

JSFIDDLE： https ：//jsfiddle.net/jimmyadaro/vp00n013/

這可能嗎？

Answer 1

雖然我確定還有其他jQuery插件可以完成此操作，但是這里有使用您的代碼的快速技巧。

首先，在滑塊中創建另一個<div> ：

   <div id="slider">
       <div id="limit"></div>
   </div>

接下來，讓JS計算myMax的百分比，並使用一些jQuery將#limit的寬度設置為適當的百分比。

var myMax = 500;
var max = 2000;
var limit = $("#limit");
limit.css("width", (myMax/max)*100+"%" )

最后，設置#limit樣式，例如：

#slider {
position: relative;
}
#limit {
position: absolute;
height: 100%;
background: #afb1b2;
} 

這是一個展示漏洞的JSFiddle 。