paper-slider { width: 100%; height: 25px; }

        </style>

        <style is="custom-style">

         paper-slider {

             --paper-slider-knob-color: var(--paper-red-500);

             --paper-slider-active-color: var(--paper-red-500);

             --paper-slider-font-color: white;

             --paper-slider-input: {

                 width: 75px;

                 background: black;

             }

         }

        </style>

        <template is="dom-if" if="{{deviceAttr.useSlider}}">

          <paper-slider min="0"

                        max="{{deviceAttr.max}}"

                        step=".001"

                        editable

                        content-type="application/json"

                        immediate-value="{{immediateSlider}}"></paper-slider>

        </template>

        <template is="dom-if" if="{{deviceAttr.useColor}}">

        <div id="colorControls">

          <button on-click="goBlack">0.0</button>

          <light9-color-picker color="{{value}}"></light9-color-picker>

        </div>

        </template>

        <template is="dom-if" if="{{deviceAttr.useChoice}}">

          <light9-listbox choices="{{deviceAttr.choices}}" value="{{value}}">

          </light9-listbox>

        </template>

      </template>

    </dom-module>

    <dom-module id="light9-live-device-control">

      <template>

        <style>

         .device {

             border: 2px solid #151e2d;

             margin: 4px;

log = console.log

Polymer

  is: 'light9-live-control'

  properties:

    device: { type: String }

    deviceAttr: { type: Object }

    max: { type: Number, value: 1 }

    value: { type: Object, notify: true }

    immediateSlider: { notify: true, observer: 'onSlider' }

    pickedChoice: { observer: 'onChange' }

  observers: [

    'onChange(value)'

    ]

  ready: ->

  onSlider: -> @value = @immediateSlider

  goBlack: -> @value = "#000000"

  onChange: (value) ->

    @lastSent = [[@device, @deviceAttr.uri, value]]

    @resend()

  resend: ->

    window.gather(@lastSent)

  clear: ->

    if @deviceAttr.useColor

      @value = '#000000'

    else

      @value = @immediateSlider = 0

Polymer

  is: "light9-live-device-control"

  properties:

    graph: { type: Object, notify: true }

    uri: { type: String, notify: true }

    deviceClass: { type: String, notify: true }

    deviceAttrs: { type: Array, notify: true }

    bgStyle: { type: String, computed: '_bgStyle(deviceClass)' }

  observers: [

    'onGraph(graph)'

    ]

  _bgStyle: (deviceClass) ->

    hash = 0

    for i in [(deviceClass.length-10)...deviceClass.length]

        hash += deviceClass.charCodeAt(i)

    hue = (hash * 8) % 360

    accent = "hsl(#{hue}, 49%, 22%)"

    "background: linear-gradient(to right, rgba(31,31,31,0) 50%, #{accent} 100%);"

  onGraph: ->