Why does AngularJS Slider (rzslider) not update correctly when the slider options are updated inside a watch expression?

Question

I have an rzslider that is set to default values.

HTML:

<div id="slider">
    <rzslider class="with-legend"
              rz-slider-model="slider.value"
              rz-slider-options="slider.options"> 
    </rzslider>
</div>

Javascript:

$scope.slider = {
    this.value = 0;
    this.options = {
        floor: 0,
        ceil: 0
}

Inside a Watch Expression, there is code that updates the slider's options:

$scope.$watch('foo', function () {
    $scope.slider.value = 0;
    $scope.slider.options.floor = 0;
    $scope.slider.options.ceil = foo.length;
}

After the code inside the watch expression is run, I expect the slider's ceiling option to change. However, even though the values of $scope.slider have been updated correctly, the change does not appear on the slider itself.

I have tried to re-render the slider as documented on the AngularJS Slider Github page, but it doesn't fix the issue.

$scope.refreshSlider = function() {
  $timeout(function() {
    $scope.$broadcast('rzSliderForceRender')
  })
}

Seems like this should work just fine. How are you checking that $scope.slider is updated correctly? — Joeri Hendrickx, Aug 12 '19 at 14:08
I displayed slider.options.ceil in the HTML above the slider to see what the value should be. — marinda_r, Aug 12 '19 at 15:01

score 2 · Accepted Answer · answered Aug 12 '19 at 14:58

After quite some digging, we found that this was a timing issue. Note that this is only a problem in the first angular digest cycle when the rzslider is set to the default value and updated by the watch expression in the same digest cycle.

The combination of the rzslider update options code and the angular watch expression code causes the rzslider to miss the update in the first digest cycle.

This is the rzslider update options code:

this.scope.$watch('rzSliderOptions()', function(newValue, oldValue) {
    if (newValue === oldValue)
        return;
    self.applyOptions(); // need to be called before synchronizing the values
    self.syncLowValue();
    if (self.range)
        self.syncHighValue();
    self.resetSlider();
}, true);

This is the angular watch expression code that calls the rzslider update options code:

 watch.fn(value, ((last === initWatchVal) ? value : last), current);

In the first digest loop last equals initWatchVal, because (according to angular) there has been no change. Determining oldValue

This means that both the newValue and the oldValue in the rzslider code contain the updated version of slider options. When these values are compared, the function returns before ever calling self.applyOptions();, which would have updated the slider.

There are two possible solutions:

Update the slider options after the first digest loop has finished running. This can be done using a timeout or adding the update code to a button-click event.
Render the slider after the slider options have already been updated. We achieved this by putting the rzslider inside an ng-if. The rzslider is created with the updated values from the start when we show the element.

ferdi buluş · Answer 2 · 2023-03-04T00:27:33.500

the solution to update datas inside of scope in below. when you create a onclick function(onclick) you should put into this scope.

let commissionsValue=0;
let interestRate=0;  
let benefits=0;
let result=0;

$scope.onclick= function () {   
    $scope.verticalSlider1.value = commissionsValue;
    $scope.verticalSlider2.value = interestRate;
    $scope.verticalSlider3.value = benefits;
    $scope.$broadcast('rzSliderForceRender');
}

Full Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <link rel="stylesheet" href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css" />
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
    <script type="text/javascript">
        
        let commissionsValue=0;
        let interestRate=0;  
        let benefits=0;
        let result=0;

        var app = angular.module('MyApp', ['rzSlider']);
        app.controller('MyController', function ($scope, $window) {
            $scope.verticalSlider1 = {
                value: commissionsValue,
                options: {
                    floor: 0,
                    ceil: 100,
                    vertical: true,
                    showSelectionBar: true
                }
            };
            $scope.verticalSlider2 = {
                value: interestRate,
                options: {
                    floor: 0,
                    ceil: 100,
                    vertical: true,
                    showSelectionBar: true
                }
            };
            $scope.verticalSlider3 = {
                value: benefits,
                options: {
                    floor: 0,
                    ceil: 100,
                    vertical: true,
                    showSelectionBar: true
                }
            };
            $scope.progress = {
                value: result,
                options: {
                    floor: 0,
                    ceil: 300,
                    vertical: false,
                    showSelectionBar: true,
                    readOnly: true,
                }
            };

            $scope.upload = function () {   
                var files = document.getElementById('file_upload').files;
            if(files.length==0){
                alert("Please choose any file...");
                return;
            }
            var filename = files[0].name;
            var extension = filename.substring(filename.lastIndexOf(".")).toUpperCase();
            if (extension == '.XLS' || extension == '.XLSX') {
                var reader = new FileReader();
            reader.readAsBinaryString(files[0]);
            reader.onload = function(e) {
                    var data = e.target.result;
                    var workbook = XLSX.read(data, {
                        type : 'binary'
                    });
                    var result = {};
                    var firstSheetName = workbook.SheetNames[0];
                    var jsonData = XLSX.utils.sheet_to_json(workbook.Sheets[firstSheetName]);
                    commissionsValue = parseInt(jsonData[0].commissions);
                    interestRate = parseInt(jsonData[0].interestRate);
                    benefits = parseInt(jsonData[0].benefits);
                    result= commissionsValue+interestRate+benefits;
                    $scope.verticalSlider1.value = commissionsValue;
                    $scope.verticalSlider2.value = interestRate;
                    $scope.verticalSlider3.value = benefits;
                    $scope.$broadcast('rzSliderForceRender');
                }
            }else{
                alert("Please select a valid excel file.");
            }
        }
        }); 
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div class="container">
        <input type="file" id="file_upload" />
        <button type="button" ng-click="upload()">Try it</button>
        <div class="card border-secondary mb-3" style="max-width: 40rem;">
            <div class="card-header">
                <div class="row">
                    <div class="col-8"><rzslider rz-slider-model="verticalSlider1.value + verticalSlider2.value + verticalSlider3.value" rz-slider-options="progress.options"></rzslider></div>
                    <div class="col-4" style="
                        margin: auto;
                        padding: 10px;
                        text-align: center;
                      "> <strong>Total: </strong> {{ verticalSlider1.value + verticalSlider2.value + verticalSlider3.value }} <i class='fa fa-euro' style='font-size:15px'></i> </div>
                  </div>
            </div>
            <div class="card-body text-secondary">
              <rzslider id="Text1" rz-slider-model="verticalSlider1.value" rz-slider-options="verticalSlider1.options" style="height: 200px; width: 220px;"></rzslider>
              <rzslider rz-slider-model="verticalSlider2.value" rz-slider-options="verticalSlider2.options" style="height: 200px; width: 220px"></rzslider>
              <rzslider rz-slider-model="verticalSlider3.value" rz-slider-options="verticalSlider3.options" style="height: 200px;"></rzslider>
            </div>
          </div>
        
    </div>
</body>
</html>

Excel File:

Excel File

Why does AngularJS Slider (rzslider) not update correctly when the slider options are updated inside a watch expression?

2 Answers2