像这样的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 。