jquery - jQuery UI カラーピッカー スライダーを jQuery Mobile バージョンに変換する

Question

私はまったく js プログラマーではないので、jquery モバイル ライブラリ内のコードを見て混乱しています (良いコメントはまったくありません)。jQuery UI を使用してカラーピッカー スライダーを作成しました。ここでフィドルを見ることができます。

要素を変更するために別の方法を使用していることがわかったので、次のように変更しようとしました。

    domSlider.setAttribute( "id", "slider-horiz" );
    domSlider.setAttribute( "role", "application" );

jQuery UIのように、スライダー自体に必要な機能を実装する方法がわかりません（フィドルで明らかなように）：

    $(function() {
    var box = $('#box')[0];

    $("#slider-horiz").slider({
        orientation: "horizontal",
        min: 0,
        max: 360,
        value: 0,
        slide: function(event, ui) {
            box.style.background = 'hsl(' + ui.value + ', 100%, 50%)';
            var clr = $('#box').css('background-color');
            $('#box').attr('data-color', clr).trigger('click');
            $('#slider-handle').css('background-color', clr);
            if (ui.value == 0) {
                $('#box').attr('data-color', 'hsl(' + ui.value + ', 0%, 0%)').trigger('click');
                $('#slider-handle').css('background-color', '#000');
            }
            if (ui.value == 360) {
                $('#box').attr('data-color', 'hsl(' + ui.value + ', 100%, 100%)').trigger('click');
                $('#slider-handle').css('background-color', '#fff');
            }

        }
    });
});