title: Can't get Vue slider work
body: <p>I need two range slider, where I can set min and max value. I found this <a href="https://github.com/lepture/vui/blob/master/src/ui/RangeSlider.vue" rel="nofollow">slider</a></p>
  
  <p>It source confuse me, because it have min and max values, but when I run it I see only one movement element.</p>
  
  <p>But problem that I can't understand how to track changing. Here is my code:</p>
  
  <pre><code>Vue.component('com', {
      props: ['value'],
      template: `
              &lt;div class="v-range-slider"&gt;
                &lt;slot name="left"&gt;&lt;/slot&gt;
                &lt;input type="range" :value.sync="value" :min="min" :max="max" :step="step" :name="name"&gt;
                &lt;slot name="right"&gt;&lt;/slot&gt;
              &lt;/div&gt;
              `
    })
  
  App = new Vue ({ 
     el: '#app',
    data: 
      {
       value: 46
      },
  
    watch : 
    {
      value : function(value)
      {
          console.log(this.value);
      }
    },
  
  methods:
  {
  
  }
  
  })
  
  }
  </code></pre>
  
  <p>And HTML part:</p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;com&gt;&lt;/com&gt;
      &lt;p&gt; Min value: {{value}}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried insert code to <a href="http://jsfiddle.net/p5dox54w/" rel="nofollow">http://jsfiddle.net/p5dox54w/</a> but it's not work. ON my PC it's show slider, but in console I do not see any changes when I move it's position.</p>