dat.gui/elements/number-controller.html

<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" class="transition" horizontal layout center>

    <div id="track-container"
         on-down="{{ down }}"
         on-up="{{ up }}"
         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="{{ truncate( value ) }}"
           on-click="{{ click }}"
           on-keydown="{{ keydown }}"
           on-blur="{{ blur }}"
           id="input">

    </template>

</div>

</polymer-element>