Slider range points both at start of bar when rendered

[feih]

Steps to reproduce

html
`

Min Value:
Max Value:

`

js
`
app.controller('BudgetCtrl', function ($scope, $timeout) {

    //Range slider config
    $scope.minRangeSlider = {
        minValue: 180,
        maxValue: 320,
        options: {
            floor: 100,
            ceil: 800,
            step: 20,
            showSelectionBar: true,
            getSelectionBarColor: function(value) {
                return '#ff8351';
            },
            getPointerColor: function(value) {
                return '#ff8351';
            },
            translate: function(value) {
                return '$' + value;
            }
        }
    };

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

Expected behaviour

slider range points should be spread given configuration in two different spots on the bar.

Actual behaviour

both range points are located at the start of the bar (overlapped). When click on any part of the bar, including the point itself, the points are reset to the correct spots on the bar.

(i'm a newbie to AngularJS and FE development in general so this could be my own fault)

See below for screenshot:

A side question I have is how to change the color in the inner circle of the point (currently it's always blueish). Didn't find an API for that in the sourc ecode.

[ValentinH]

For your first question, it's explain in the ReadMe.
For the color, you just need to override the CSS rule for the rz-pointee class.

[feih]

Thanks for the quick response!

For question 1, I've tried the refresh function but doesn't seem to help. I don't have toggle like feature and parent DOM is visible upfront.

[feih]

For question 2, I couldn't find the rz-pointee class in rzslider.css so not sure how to override it.

[ValentinH]

OK, then please provide a jsfiddle showing the issue and I will help you.

[feih]

hi, I fixed the first issue of rendering by using the broadcast reset finally.

For the 2nd issue, I have no luck yet. override rz-pointee class's background color etc doesn't seem to solve the problem. In fact, I can't find rz-pointee class in original css.

[ValentinH]

It's rz-pointer

[feih]

Got it. Thanks. I fixed it with rz-pointer.

[gururajmca]

Had same issue, basically when you have a slider directive which is hidden by default in the page, like having a slider in the model box. etc this problem comes, in this case we need to explicitly re-render the slider object using $scope.$broadcast('rzSliderForceRender'); function.

[ValentinH]

Yes this is documented and also demoed on the website! ;)

[jatinbphp]

I have same issue and tried $scope.$broadcast('rzSliderForceRender'); but it did not work.

Any idea how i can fix it ? slider is not hidden in my case, it is visible always.

[ValentinH]

Please provide a demo of the problem.

[hardik-singhal]

what if we are not using rzslider and using vr.directive.slider then how will i render it to force refresh

[ValentinH]

What is vr.directive.slider?