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