CODEWITHSUNDEEP
jqueryjquery-plugins
IlludiumPu36
IlludiumPu36

Reputation: 4304

MiniColors picker not updating color variable

I'm trying to implement MiniColors. MiniColors works OK, but I can't get the value of variable colorSet to update when MiniColors is changed. I have an txt input #colour with shows the default value, but that value is not updating...

<script type="text/javascript">
    $(document).ready(function() {

        $('#picker').minicolors({
            opacity: false,
            defaultValue: '#2083fd',
            control: 'hue',
            textfield: false,
            change: function(hex, opacity) {
                $('#picker').val(hex); 
             }
        });

        var colourSet = $('#picker').val();
        $('#colour').val(colourSet);

Any help appreciated!

Upvotes: 0

Views: 1885

Answers (1)

Cianan Sims
Cianan Sims

Reputation: 3429

If you want colourSet to update every time the color is changed, the assignment needs to go inside the change event function. Right now you have it setting colourSet once, after the minicolor is initiated. I think you want something like the code below. Also, you can probably get rid of the variable and set the #colour element directly, if desired.

$(document).ready(function() {
    var colourSet;

    $('#picker').minicolors({
        opacity: false,
        defaultValue: '#2083fd',
        control: 'hue',
        textfield: false,
        change: function(hex, opacity) {
            $('#picker').val(hex);
            colourSet = hex;
            $('#colour').val(colourSet);
         }
    });

Upvotes: 1

Related Questions