Question

我正在使用Kendo Slider。我的要求是，对于每个滑块值的更改，我需要更改剑道滑块背景颜色。

Answer 1

如果要更改滑块的背景，可以执行以下操作：

$("#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

剑道滑块背景颜色？

1 个答案: