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