Building a range slider in Angularjs 2
<p>I am using Angular 2 and I am trying to figure out how to replace all the things I usually do with jQuery. (Is there some nice article out there mapping jQuery to Angular 2?)</p>

<p>I would like to implement the range slider that is available in for instance the jQuery UI library: <a href="http://jqueryui.com/slider/#range" rel="nofollow">http://jqueryui.com/slider/#range</a>.</p>

<p>I am starting out with this in my html:</p>

<pre><code>&lt;div class="bar"&gt;
    &lt;div id="slider-range" style="background-color:black; width:20px; height:20px;" (mousedown)="moveRange($event)"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And I want to be able to move the #slider-range to left and right, and it should be limited to the with of .bar.</p>

<p>In my controller:</p>

<pre><code>moveRange() {
    console.log(event.clientX);
}
</code></pre>

<p>Which is where I got stuck. My first problem is, how do I modify the position of #slider-range using Angular?</p>