如何根据其他两个滑块更新滑块

I have two input slider and i want third slider to be a product of first two slider and also the third slider must dynamically change its value on changing the values of first two slider.

我有两个输入滑块,我希望第三个滑块是前两个滑块的产品,第三个滑块必须在更改前两个滑块的值时动态更改其值。

Can you please help me with it.

你能帮帮我吗?

Here is what i tried

这是我试过的

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <input ng-model="value1" type="range" min="0" max="1" step="0.1" />
    <input ng-model="value2" type="range" min="0" max="1" step="0.1" />
    <input ng-model="value3" ng-value="value1 * value2" type="range" min="0" max="1" step="0.1" />

  </body>

</html>

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.value1=0.2;
  $scope.value2=0.1;
  $scope.value3=0;
});

Plunker link for the same.

Plunker链接相同。

1 个解决方案

#1

Use ng-change to make a function call on elements that will have its value evaluated. Reference

使用ng-change对将评估其值的元素进行函数调用。参考

Here is the code snippet

这是代码片段

index.html

<body ng-controller="MainCtrl">
    <input ng-model="value1" ng-change="changed()" type="range" min="0" max="1" step="0.1" />
    <input ng-model="value2" ng-change="changed()" type="range" min="0" max="1" step="0.1" />
    <input ng-model="value3" type="range" min="0" max="1" step="0.01" />
</body>

app.js

  $scope.changed = function(){
    $scope.value3=$scope.value1*$scope.value2;
  }

#1