Bind to value on <input type="color">

[mattyclarkson]

Binding to value on a <input type="color"> doesn't update the component. On Chromium 34.0.1847.132 (265804)

I'd be happy to help contribute to Polymer if you could point in me in the correct place to fix this.

<link rel="import" href="../polymer/polymer.html">

<polymer-element name="colour-picker" attributes="r g b web">
  <template>
    <style>
      :host {
        display:block;
      }
      :host .colour-input {
        display: flex;
        width: 100%;
        margin-bottom: .5em;
      }
      :host .colour-input label {
        width: 5em;
        text-align: center;
      }
      :host .colour-input input[type=range] {
        flex: 1;
        margin: 0 .5em;
      }
      :host .colour-input input[type=number] {
        width: 3em;
        text-align: center;
      }
      :host #colourSelector {
        width: 100%;
        height: 2em;
      }
    </style>
    <template repeat="{{[{name: 'Red', colour:r}, {name: 'Green', colour:g}, {name: 'Blue', colour:b}]}}">
      <div class="colour-input">
        <label>{{name}}</label>
        <input type="range" min="0" max="255" step="1" value="{{colour}}"/>
        <input type="number" min="0" max="255" value="{{colour}}"/>
      </div>
    </template>
    <input id="colourSelector" type="color" value="{{web}}"/>
  </template>
  <script>
    (function(undefined) {
      'use strict';
      Polymer('colour-picker', {
        /**
         * The 8bit red component of the colour
         * @attribute r
         * @type Number
         * @default 255
         */
        r: 255,

        /**
         * The 8bit green component of the colour
         * @attribute g
         * @type Number
         * @default 0
         */
        g: 0,

        /**
         * The 8bit blue component of the colour
         * @attribute b
         * @type Number
         * @default 0
         */
        b: 0,

        /**
         * The web colour string
         * @attribute r
         * @type Number
         * @default 'FF0000;
         */
        web: '#FF0000',

        // Observe properties
        observe: {
          r: 'rgbChanged',
          g: 'rgbChanged',
          b: 'rgbChanged',
        },

        /**
         * Converts the RGB into HSL and web
         * @function rgbChanged
         */
        rgbChanged: function() {
          var toHex = function(value) {
            var hex = (~~value).toString(16);
            if (value < 16) {
              return '0' + hex;
            }
            return hex
          };
          this.web = '#' + toHex(this.r) + toHex(this.g) + toHex(this.b);
        },

        /**
         * Converts the web into RGB
         * @function webChanged
         * @param oldValue the previous value of `web`
         * @param newValue the updated value of `web`
         */
        webChanged: function(oldValue, newValue) {
          console.log(newValue);
          var match = newValue.match(/^(#)?([0-9A-Za-z]{2})([0-9A-Za-z]{2})([0-9A-Za-z]{2})$/);
          if (match) {
            this.r = parseInt(match[2], 16);
            this.g = parseInt(match[3], 16);
            this.b = parseInt(match[4], 16);
          }
        }
      });
    }())
  </script>
</polymer-element>

[mattyclarkson]

Sorry, this is a failure in my code. Not an issue with Polymer!

[KatyKasmai]

Hey, I'm having trouble changing the input text color. It's not responding to my css. The label text responds with no problem, its when the user starts typing - that font color won't change. Currently, the color is black, but I need it white. I wanted to see if this is just my problem?

paper-input floatingLabel label="enter your email" name="EMAIL" class="paperemail" style="width:400px">

/This affects the label, not the user input text/
.paperemail {color: #fff; font-size: 3rem; font-family: 'RobotoDraft'; font-weight: 200; }

[robdodson]

Try using the ::shadow pseudo-element (http://jsbin.com/cegipe/6/edit)

something like:

.paperemail,
.paperemail::shadow input {
color: red;
}

On Wed, Sep 24, 2014 at 7:51 PM, KatyKasmai [email protected]
wrote:

Hey, I'm having trouble changing the input text color. It's not responding
to my css. The label text responds with no problem, its when the user
starts typing - that font color won't change. Currently, the color is
black, but I need it white. I wanted to see if this is just my problem?

/This affects the label, not the user input text/
.paperemail {color: #fff; font-size: 3rem; font-family: 'RobotoDraft';
font-weight: 200; }

—
Reply to this email directly or view it on GitHub
#521 (comment).

[KatyKasmai]

That did the trick. Thanks Rob!