jquery-ui - 剑道 slider 背景颜色？

Question

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

Answer 1

如果要更改 slider 的背景，可以执行以下操作:

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

我所做的是定义一个 slider ，其值介于 0 之间。和 100并定义 change处理程序读取当前值(如 e.value )并根据值定义幻灯片的背景。

重要的是:

k-slider-selection是所选幻灯片部分的 CSS 类。

k-slider-track是完整幻灯片的 CSS 类。

例如:如果值为 33，则 0-33 的 slider 部分为 k-slider-selection而全范围 (0-100) 为 k-slider-track