剑道滑块背景颜色？

我正在使用剑道滑块。我的要求是，对于每个滑块值更改，我需要更改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

剑道滑块背景颜色？

回答

相关问题