Стиль слайдер 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 демонстрируя хак.