jquery-ui - 剑道滑块背景颜色？

Question

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

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处理程序以读取当前值（as e.value），并根据值定义幻灯片的背景。

重要的是：

1. k-slider-selection是所选幻灯片部分的 CSS 类。
2. k-slider-track是完整幻灯片的 CSS 类。

例如：如果值为 33，则 0-33 的滑块部分是k-slider-selection，而整个范围 (0-100) 是k-slider-track