jquery slider - slide function canceling when it shouldnt

Question

So I have a slider that changes the background colors of objects in a canvas. I want to have the value update on slide because its the user needs to be able to see the changes as they're making them.

While sliding the object's color changes as its supposed to but when the slider's handle is released the ui.value is set to its previous value of 0. According to the jquery ui slider documentation this means the event is being canceled... why is this happening?

See http://api.jqueryui.com/slider/#event-slide

$(function() {
    $('.colorShapeSolo').slider({
        min: 0,
        max: 255,
        change: colorShapeAdapter,
        slide: function (event, ui) { colorShapeAdapter(ui.value); },   
        name: 'shape'   
    });
});

function colorShapeAdapter(value)   { colorPickerAdapter('shape', 'colorShape_noColor', 'colorShape_color', 'colorShape div', value); }

// Set color of a selected object
function colorpickerSetColor($type, $noColor, $color, $picker, $hex) {

    // Set colorpicker element colors
    if ($('#' + $noColor).css('display') == 'block') $('#' + $noColor).css('display', 'none');
    if ($('#' + $color).css('display') == 'none') $('#' + $color).css('display', 'block');
    $('#' + $picker).css('backgroundColor', '#' + $hex);

    // Check drawing mode
    if ($type == 'draw') {
        canvas.freeDrawingColor = '#' + $hex;
    } else {
        var activeObject = canvas.getActiveObject();

        if (activeObject) {
            switch ($type) {
                case 'shape':
                    activeObject.fill = '#' + $hex;
                    break;
                case 'stroke':
                    if (activeObject.type === 'named-truetypetext') {
                        var strokeCol = '#' + $hex;
                        setFontOutlineColor(strokeCol, activeObject.trackId);
                        activeObject.set({outlineColor: strokeCol, stroke: strokeCol});
                    } else {
                        activeObject.stroke = '#' + $hex;
                        activeObject.strokeStyle = '#' + $hex;
                    }
                    break;
                default: break;
            }
        } else if (activeObject == null) {
            var rgb = _util.hexToRgb($hex);
            canvas.backgroundColor = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',1)';
        }
    }

    // Update
    canvas.renderAll();
    canvasBrowser_updateCC();
}

I know the problem has to be in the slider because the colorpickerSetColor function is being sent a value of 0 when this problem is occurring.

score 0 · Answer 1 · edited May 23 '17 at 12:22

0

Change and slide should not be used together

$(function() {
    $('.colorShapeSolo').slider({
        change: colorShapeAdapter,
        slide: function (event, ui) { colorShapeAdapter(ui.value); },     
    });
});

See jQuery UI Slider - Value returned from 'slide' event on release is different from 'change' value

edited May 23 '17 at 12:22

Community

1
1

answered Apr 10 '15 at 13:25

ds011591

494
8
19

jquery slider - slide function canceling when it shouldnt

1 Answers1