jQuery滑塊幻燈片上的默認灰色背景

我已經實現了jQuery滑塊功能，當我滑動它時，它沒有用默認灰色背景填充滑塊。螢火蟲的滑塊後，我發現下面的一段HTML在我的實現中丟失了。要注意的是，與jQuery網站上的jQuery示例進行了比較。jQuery滑塊幻燈片上的默認灰色背景

<div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 0%;"></div>

下面是已實施滑塊的上下文。

的Javascript

$("#slider-range-min").slider({ range: "min", step: 100, //on slider-stop functionality stop: function(event, ui) { //code goes here }, //on slide functionality slide: function(event, ui) { //code goes here } });

HTML

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

問題：

這個HTML是由jQuery滑動庫動態生成的嗎？
其工作原理的解釋。從我的例子

輸出

<div id="slider-range-min" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false"><a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 38.5714%;"></a></div>

不含即使範圍內自動生成的div類：「分鐘」已經被指定。

下面是一個鏈接，用滑動功能上的橙色背景替換默認灰色。

changing the color of a jquery ui slider as you slide it！

來源

2014-04-04 nata.inc

請發佈您正在做的事情的完整代碼示例，並在可能的情況下附帶jsFiddle.net示例。 – j08691

做了一個小提琴，發現範圍：「分鐘」是似乎控制灰色背景的元素。 [jsfiddle]（http://jsfiddle.net/YHm42/） –

之前：在頁面加載

功能負荷（）{（「＃slider-range-min」）。slider（{ range：「min」， disab led：true， }）; }

功能user_action（）{。 $（「＃滑塊範圍-MIN」）滑塊（{ 禁用：真， }）; }

後：上的用戶動作觸發

功能負載（）{ $（「＃滑塊範圍-MIN」）滑塊（{ 範圍：「min」是， disabled：true， }）; }

功能user_action（）{ $（「＃滑塊範圍-MIN」）滑塊（{ 範圍：「min」是，禁用：假，。}）; }

來源

2014-04-07 15:30:43

可以嘗試把他在你的CSS文件（底部）

.ui-widget-header { 
background: #cccccc; 
}

，如果它不工作，你可以試試這個：（不優先停留）

.ui-widget-header { 
background: #cccccc!important; 
}

jQuery的

我認爲你必須設置最小值，最大值。您現在使用getter作爲最小值。除此之外，您必須創建兩個手柄，只有一個手柄沒有任何背景可用。

試試這個：

$("#slider-range-min").slider({ 
     range: true, 
     min: 0, 
     max: 500, 
     values: [ 75, 300 ], 
     slide: function(event, ui) { 

     } 
    });

見琴：http://jsfiddle.net/ZTeKC/

來源

2014-04-04 14:20:25 Mike

感謝您的回覆，但問題在於默認的灰色背景，即使範圍設置爲「min」值，該灰色背景也不起作用。 –

你想要這樣的東西嗎？ http://jsfiddle.net/6sLt2/ – Mike

是的。原因在於範圍是在滑塊處於禁用模式時指定的，但在啓用滑塊時未設置。提供了一個示例代碼以更好地理解解決方案。 –

基於JS和你只要woudl不行的HTML。

「$（」＃滑塊範圍分鐘「）。滑塊」正在尋找一個元素與「滑程敏」 HTML中的id你上面提供的不具有ID。

是它會生成自己的HTML需要的就是給你一個滑塊
其所有解釋這裏http://api.jqueryui.com/slider/

來源

2014-04-04 14:23:32

我提供的html確實有這個id。更確切地說，滑塊功能工作正常，除了在滑動滑塊時沒有出現灰色背景。 –

jQuery滑塊幻燈片上的默認灰色背景

回答

相關問題