title: Default Param on Polymer.js Input Range
body: <p>I'm trying to use Polymer.js with an <code>input[type="range"]</code> to bind the current value of the range slider in an associated <code>&lt;output&gt;</code> element. Everything works with the exception of my default input value in the <code>input</code>. The value param doesn't show up in the DOM, and my range sliders are set to zero, as seen here:</p>
  
  <p><strong>Initial Load</strong></p>
  
  <p><a href="https://i.stack.imgur.com/q6ktr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q6ktr.png" alt="enter image description here"></a></p>
  
  <p><strong>After Slide Event</strong></p>
  
  <p>After I update/slide the sliders on the input, the expected value is bound to the <code>&lt;output&gt;</code> as seen below. </p>
  
  <p><a href="https://i.stack.imgur.com/nAP9F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nAP9F.png" alt="enter image description here"></a></p>
  
  <p>Template</p>
  
  <pre><code>&lt;dom-module id="item-selection"&gt;
    &lt;link rel="stylesheet" href="item-selection.scss" /&gt;
    &lt;template&gt;
      &lt;template is="dom-repeat" items="{{sliders}}"&gt;
        &lt;div class="slider-group"&gt;
          &lt;label&gt;{{item.name}}&lt;/label&gt;
          &lt;output&gt;{{item.initialValue}}&lt;/output&gt;
          &lt;input type="range"
            min="{{item.minValue}}"
            max="{{item.maxValue}}"
            value="{{item.initialValue::input}}"
            id="{{item.id}}"
            step="1"
          &gt;
        &lt;/div&gt;
      &lt;/template&gt;
      &lt;a href="#" class="button"&gt;Button Text&lt;/a&gt;
    &lt;/template&gt;
  
    &lt;script src="item-selection.js"&gt;&lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>Polymer({
    is: "item-selection",
    ready: function() {
      this.sliders = [
        {
          name: "item-one",
          id: "item-one-id",
          initialValue: 175,
          minValue: 100,
          maxValue: 200
        },
        {
          name: "item-two",
          id: "item-one-id",
          initialValue: 175,
          minValue: 100,
          maxValue: 281
        },
        {
          name: "item-three",
          id: "item-one-id",
          initialValue: 150,
          minValue: 100,
          maxValue: 200
        }
      ]
    }
  });
  </code></pre>
  
  <p>DOM Inspection</p>
  
  <pre><code>&lt;div class="slider-group style-scope item-selection"&gt;
    &lt;label class="style-scope item-selection"&gt;item-two&lt;/label&gt;
    &lt;output class="style-scope item-selection"&gt;175&lt;/outpute&gt;
    &lt;input type="range" step="1" 
      class="style-scope item-selection" 
      id="item-one-id" 
      max="281" min="100"&gt;
  &lt;/div&gt;
  ...
  </code></pre>
  
  <p>Is there a way to set a default value as well as allow the databinding on the input elements? I looked through <a href="https://www.polymer-project.org/1.0/docs/devguide/data-binding" rel="nofollow noreferrer">https://www.polymer-project.org/1.0/docs/devguide/data-binding</a> to see if I could find a solution, but nothing seems obvious to me. </p>