CODEWITHSUNDEEP
jqueryjquery-uicolor-picker
Kakitori
Kakitori

Reputation: 913

how to get the colorpicker value?

How could I get the colorpicker value in an input with on change of red, green, blue colours?
http://jsbin.com/alefok/1/edit

<body>
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="swatch" class="ui-widget-content ui-corner-all"></div>
<input type="text" id="colour">
<script>
  $(".ui-slider-handle").on('change', function(){
var valA = $("#red").slider("value");
var valB = $("#green").slider("value");
var valC = $("#blue").slider("value");
$("#colour").append(valA+","+ valB+","+ valC)
})
</script>
</body>

Upvotes: 0

Views: 2653

Answers (3)

Alexander
Alexander

Reputation: 23537

Set it on the refreshSwatch function which will trigger on the slide and change events of jQuery UI's slider along when the background-color is being updated.

function refreshSwatch(evt, ui) {
    var red = $("#red").slider("value"),
        green = $("#green").slider("option", "value"),
        blue = $("#blue").slider("value"),
        hex = hexFromRGB(red, green, blue);
    $("#swatch").css("background-color", "#" + hex);
    $("#colour").val("#" + hex);
}

Using these events will let you perform live updates. You can adjust the format of the value set to the text input.

See it here.

Upvotes: 1

legendofawesomeness
legendofawesomeness

Reputation: 2911

Try changing your event binding as below: JSBin

<script>
      $("#red, #green, #blue").on('slidestop', function(){
        var valA = $("#red").slider("value");
        var valB = $("#green").slider("value");
        var valC = $("#blue").slider("value");
        $("#colour").val(valA+","+ valB+","+ valC)
        })
    </script>

Upvotes: 2

Kivylius
Kivylius

Reputation: 6547

You need to get the BG of the swach:

$('#red, #blue, #green').change(function(){

    $('#swatch').css('background-color');

});

Upvotes: 0

Related Questions