dat.gui/elements/number-controller.html

<!-- 

[ ] step
[ ] sig figs

[ ] arrow keys

[ ] only validate input box on blur, not on keydown
[ ] enter key blurs

[x] dy to drag friction
[x] negative slider
[x] hover behavior

-->

<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="base-controller.html">

<script src="number-controller.js"></script>

<polymer-element 
    name="number-controller" 
    attributes="min max value step" 
    extends="base-controller"
    constructor="NumberController" 
    >

<template>

<link rel="stylesheet" href="number-controller.css">

<div id="container" horizontal layout center>

    <div id="track-container"
         on-down="{{ down }}"
         on-trackx="{{ trackx }}"
         on-tracky="{{ tracky }}"
         on-trackstart="{{ trackstart }}"
         horizontal layout center
         flex>

        <div id="track">

            <div id="fill"></div>
            <div id="knob"></div>

        </div>

    </div>

    <input type="text" 
           value="{{ value }}"
           on-click="{{ click }}"
           id="input">

    </template>

</div>

</polymer-element>