AngularJS rzslider not sending changed slider value

1.5k Views Asked by At

Hi i am using angularjs rzmodule/rzslider, after changing slider to some range ng-modal not returning changed value, it is still returning 10000 only which is configured initially. JS code

$scope.slider = {
      value: 10000,
      options: {
        floor: 0,
        ceil: 100000,
        step: 1000,
        minLimit: 1000,
        maxLimit: 100000
      }
    };

HTML code

<h1 class="selected-amt"><i class="fa fa-rupee"></i> {{slider.value}}</h1>
               <rzslider rz-slider-model="slider.value"
       rz-slider-options="slider.options"></rzslider>

Where as in {{slider.value}} it is updating properly, but in my project after click on button to get updated/changed value if i access like $scope.slider.value it is giving me initial value always which is 10000, but i moved slider to 20000. in my controller i am doing something like this to get updated changed value

$scope.getvalue=function(){
console.log($scope.slider.value)//should return changed value but giving 10000 always
}

Anyone any suggestions please?

1

There are 1 best solutions below

2
On

I try with your code for checking returning changed value. It is working fine. You can check code.

var myApp = angular.module('myapp', ['rzModule']);

myApp.controller('TestController', TestController);

function TestController($scope) 
{

  $scope.slider = 
  {
      value: 10000,
      options: {
        floor: 0,
        ceil: 100000,
        step: 1000,
        minLimit: 1000,
        maxLimit: 100000
      }
  };
    
  $scope.getvalue=function()
  {
     console.log($scope.slider.value);//should return changed value but giving 10000 always
  }   
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/6.5.1/rzslider.css"/>
<div ng-app="myapp">
    <div ng-controller="TestController">
        <button ng-click= "getvalue()">Get slider value</button>
        <h1 class="selected-amt"><i class="fa fa-rupee"></i> {{slider.value}}</h1>
        <rzslider rz-slider-model="slider.value" rz-slider-options="slider.options"></rzslider>
    </div>
</div>