在 Angularjs 2 中构建范围滑块答案

【问题标题】：Building a range slider in Angularjs 2在 Angularjs 2 中构建范围滑块
【发布时间】：2017-05-01 18:49:47
【问题描述】：

我正在使用 Angular 2，我试图弄清楚如何替换我通常用 jQuery 做的所有事情。（是否有一些不错的文章将 jQuery 映射到 Angular 2？）

我想实现例如 jQuery UI 库中可用的范围滑块：http://jqueryui.com/slider/#range。

我开始在我的 html 中使用这个：

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

并且我希望能够将#slider-range 左右移动，并且应该限制为.bar 的with。

在我的控制器中：

moveRange() {
    console.log(event.clientX);
}

这是我卡住的地方。我的第一个问题是，如何使用 Angular 修改#slider-range 的位置？

【问题讨论】：

标签： angular

【解决方案1】：

我认为使用样式绑定是更新#slider-range位置的简单方法

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

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

【讨论】：