修改 jQuery UI 颜色选择器滑块以包含黑白值答案

【问题标题】：Modify jQuery UI colorpicker slider to include black and white values修改 jQuery UI 颜色选择器滑块以包含黑白值
【发布时间】：2013-06-12 02:42:02
【问题描述】：

我目前正在使用 jQuery UI 颜色选择器滑块的修改版本，see fiddle here。我想知道是否有一种简单的方法来欺骗它，这样当它的值为 0 时，颜色实际上是黑色（#000，hsl（0，0％，0％）），当它达到最大值时360 它会变成白色（#fff, hsl(360, 100%, 100%)）。我不是 js 专业人士，但我在想一些类似的事情......

slide: function(event, ui) {
    if (ui.value = 0) $('#box').attr('data-color', 'hsl(' + ui.value + ', 0%, 0%)');
    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);
}

但这不起作用

【问题讨论】：

标签： jquery jquery-ui canvas colors html5-canvas

【解决方案1】：

想通了：

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


    }
});

});

【讨论】：