Slider goes back when moved

[pietro-fragnito]

Steps to reproduce

1. Install slider
2. Include slider
3. Move slider

Expected behavior

Slider doesn't go back when moved.

Actual behavior

The slider shows a strange behavior: when I start to move the slider (also for a very very little step ahead or behind) it goes always back of a big step. I know it's difficult to understand so I loaded this video on YouTube. And this is my slider (HTML + Controller):

<rzslider rz-slider-model="slider.min" rz-slider-high="slider.max" rz-slider-options="slider.options"> </rzslider>

$scope.slider = min: 100, max: 180, options: { floor: 0, ceil: 200, step: 5, noSwitching: true, getSelectionBarColor: function () { return '#F06820'; }, getPointerColor: function () { return '#042863'; }, translate: function (value) { return value + ' kW'; }, onEnd: function() { //DO SOMETHING } } };

[ValentinH]

What version are you using / what browser?

I just set up a demo using your code and nothing seems broken: http://jsfiddle.net/yjeamcpu/

BTW, you should not use the JS to set the color if it's static but CSS.

[pietro-fragnito]

I tried with Safari and Chrome: same behavior . This is the version:

"angularjs-slider": "~2.11.0",

NB: about the colors, also removing them this strange behavior still persist

[ValentinH]

Do you have the issue on the demo I provided?

[pietro-fragnito]

Do you mean to create a new project like your demo?

[ValentinH]

Nope, I set up a demo and would like to know if you can reproduce your issue on it? If not, then please provide a similar demo showing the issue.

[pietro-fragnito]

I think I'm using an old version then your demo :

{ "name": "angularjs-slider", "version": "2.11.0", "description": "AngularJS slider directive with no external dependencies. Mobile friendly!.", "main": "dist/rzslider.js", "repository": { "type": "git", "url": "https://github.com/angular-slider/angularjs-slider" }, "keywords": [ "angular", "slider" ], "scripts": { "commit": "git-cz", "build": "grunt", "test": "grunt test", "report-coverage": "cat ./tests/coverage/lcov.info | codecov" }, "peerDependencies": { "angular": "^1.2.x" }, "devDependencies": { "angular": "1.4.7", "angular-mocks": "1.4.8", "chai": "^3.4.1", "codecov.io": "^0.1.6", "commitizen": "^2.4.6", "cz-conventional-changelog": "^1.1.5", "grunt": "~0.4.2", "grunt-angular-templates": "^0.5.7", "grunt-contrib-concat": "^0.5.1", "grunt-contrib-mincss": "~0.3.2", "grunt-contrib-uglify": "~0.2.2", "grunt-contrib-watch": "^0.6.1", "grunt-karma": "^0.12.1", "grunt-ng-annotate": "^1.0.1", "grunt-recess": "~0.4.0", "grunt-replace": "^0.11.0", "grunt-serve": "^0.1.6", "karma": "^0.13.15", "karma-chai": "^0.1.0", "karma-chrome-launcher": "^0.2.2", "karma-coverage": "^0.5.3", "karma-mocha": "^0.2.1", "karma-ng-html2js-preprocessor": "^0.2.0", "karma-phantomjs-launcher": "^0.2.1", "karma-sinon": "^1.0.4", "mocha": "^2.3.4", "phantomjs": "^1.9.19", "recess": "~1.1.9", "sinon": "^1.17.2" }, "author": "Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>", "license": "MIT", "readmeFilename": "README.md", "czConfig": { "path": "node_modules/cz-conventional-changelog" } }

How can I update via bower? I tried with

bower update angularjs-slider

but it updated to the 2.11.0

[ValentinH]

It's because the latest version is 4.0.0 which is a major update version so you need to change your bower file to explicitly require the 4.0.

[pietro-fragnito]

Ok. Updated to 4.0.2 but problem persists. I try to add a new slider to my project with your demo code, but I got same result. It's difficult to reproduce it cause it's a very big app...in fact I make a demo video.

:(

[ValentinH]

You need to call this code:

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

when your slider is rendered. It can be at the initialisation of your controller or directive, depends on your architecture.

[pietro-fragnito]

I put it on "onEnd"

// Slider
        $scope.slider = {
            min: 100,
            max: 180,
options: {
                floor: 0,
                ceil: 200,
                step: 5,
                noSwitching: true,
                getSelectionBarColor: function () {
                    return '#F06820';
                },
                getPointerColor: function () {
                    return '#042863';
                },
                translate: function (value) {
                    return value + ' kW';
                },
                onEnd: function () {

                    WidgetService.M_02_02_poiRange.query({
                        aggregator_id: "aggr_1",
                        min: $scope.slider.min,
                        max: $scope.slider.max
                    }, function (profiles) {
                        $scope.points.coords = profiles.coords;
                        $scope.polylines.coords = [profiles.coords];
                        $scope.map.center = profiles.center;
                        $scope.points.properties = profiles.properties;
                    }).$promise;

                    refreshSlider();
                }
            }
        };

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

but the problem persists

[ValentinH]

No this is wrong. You should call it at the root of your component. At the same moment you declare your $scope.slider =

[pietro-fragnito]

Can you integrate this thing in your demo please?

[ValentinH]

http://jsfiddle.net/f83b002z/

[pietro-fragnito]

I got the cause of this behavior: in my CSS I set zoom property:

body { -moz-transform: scale(0.9, 0.9); /* Moz-browsers */ zoom: 0.85; /* Other non-webkit browsers */ zoom: 85%; /* Webkit browsers */ background-image: url("../img/bg.jpg"); background-size: cover; }

if I remove this property the slider works well. Also if I set the zoom property of the child element where is the slider to 120% it works well.

Hope this can help.