Angularjs 每当用户单击时，需要将范围滑块更新为10

我有一个范围滑块，我想用

+10

或

-10

更新它。我已经编写了jquery代码，它运行良好，但我想用AngularJS创建它

下面是jquery的示例-“”

---

我在这个提琴中尝试了angular js-“

在angular中，您当然需要一个自定义指令。为了使组件更加可重用，我实现了一个具有隔离范围和以下属性的指令：

• 最小值：最小值
• max：最大值
• 步骤：每次单击的步骤
• 值：初始值

HTML如下所示：

<input type="range" id="rangeinput1" ng-model="range1"
        range-with-step min="0" max="200" step="20" value="100" />

---

另请参见，这个

在角度上更好的方法是使用双向绑定，它只更新滑块和值，字符串插值将显示更新的范围值：

<div id="slidecontainer" class="test">
<input type="range" min="1" max="100" value={{range}} class="slider" id="myRange" [(ngModel)]="rangeValues">
</div>
     <span class="value-span" id="plain_1">{{rangeValues}}</span>
</div>

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 rangeValues : any = 3;

---

尝试使用angular的ui滑块组件？

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 rangeValues : any = 3;