stset stset - 1 month ago 17
HTML Question

binding textbox and slider without using angularjs only javascript

I
want
to
make
sure
that
the
echo
output
in
idMyEcho (textbox)
and
the
slider
position
on
idSlider (slider)
are
consistent
when
idButton (button)
is
pressed
and
when
the
user
changes
the
slider
bar



var mCount = 0;
incCount = function() {
mCount++;
var myEcho = document.getElementById("idMyEcho");
myEcho.setAttribute("value", mCount);
};

setCount = function() {
var aSlider = document.getElementById("idSlider");
mCount = aSlider.value;
};

<div>
<input type="button" id="idButton" value="MyButton" onclick="incCount()">
<input type="text" id="idMyEcho" value="0">
<input type="range" id="idSlider" value="4" onclick="setCount()">
</div>





thanks

Answer

There are few problems with your code, You should have $scope variable and controller ,

app.controller("testCtrl", ["$scope",
  function($scope) {
    $scope.mCount = 0;
    $scope.incCount = function() {
      $scope.mCount++;
    };

    $scope.setCount = function() {    
    };
  }
]);

HTML

  <div class="col-sm-12" ng-controller="testCtrl">
    <div>
      <input type="button" id="idButton" value="MyButton" ng-click="incCount()">
      <input type="text" ng-model="mCount">
      <input type="range" id="idSlider" ng-model="mCount" ng-click="setCount()">
    </div>
  </div>

DEMO

DEMO USING PURE JAVASCRIPT