在Angularjs 2中构建范围滑块

我正在使用Angular 2，我正在试图找出如何替换我通常使用jQuery所做的所有事情。（有没有关于将jQuery映射到Angular 2的好文章？）

我想实现范围滑块，该滑块在jQuery UI库中可用：

我从html中的以下内容开始：

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

---

这就是我被卡住的地方。我的第一个问题是，如何使用Angular修改#滑块范围的位置？

我认为使用样式绑定是更新

#滑块范围位置的一种简单方法

<div id="slider-range" [style.left]="calculatedLeft" style="background-color:black; width:20px; height:20px;" ngStyle= (mousedown)="moveRange($event)"></div>



对于更复杂的样式绑定，可以使用

<div id="slider-range" [style.left]="calculatedLeft" style="background-color:black; width:20px; height:20px;" ngStyle= (mousedown)="moveRange($event)"></div>