劍道滑塊背景顏色？

我正在使用劍道滑塊。我的要求是，對於每個滑塊值更改，我需要更改kendo滑塊背景顏色。劍道滑塊背景顏色？

2013-01-21 user1997467

如果你想改變滑塊的背景下，你可以這樣做：

$("#slider").kendoSlider({ 
    orientation: "vertical", 
    min: 0, 
    max: 100, 
    smallStep: 1, 
    largeStep: 20, 
    showButtons: true, 
    change: function (e) { 
     var top = $("#slider").closest(".k-slider-wrap"); 
     if (e.value < 33) { 
      $(".k-slider-track", top).css("background-color", "#ff0000"); 
      $(".k-slider-selection", top).css("background-color", "#ff0000"); 
     } else if (e.value < 66) { 
      $(".k-slider-track", top).css("background-color", "#00ff00"); 
      $(".k-slider-selection", top).css("background-color", "#00ff00"); 
     } else { 
      $(".k-slider-track", top).css("background-color", "#0000ff"); 
      $(".k-slider-selection", top).css("background-color", "#0000ff"); 
     } 
    } 
});

我所做的是定義一個滑塊與價值0和100並定義change處理程序來讀取電流值之間（如e.value）並根據值定義幻燈片的背景。

最重要的是：

k-slider-selection是所選擇的滑動部分的CSS類。
k-slider-track是完整幻燈片的CSS類。

例如：如果該值是33，用於0-33滑塊部是k-slider-selection而全範圍（0-100）是k-slider-track

來源

2013-01-21 15:55:41 OnaBai

我也有同樣的問題，但我有一個頁面上的多個滑塊。當您使用類選擇器時，您的解決方案將更改所有滑塊的顏色。我想只能更改觸發更改事件的滑塊的顏色？ – haroonxml

是的，我沒有使用類選擇器**但是**我將它約束爲頂部，即$（「＃slider」）。closest（「.k-slider-wrap」）'因此它被限制爲' ＃slider'。 – OnaBai

是的，這是正確的。 – haroonxml

劍道滑塊背景顏色？

回答

相關問題