Slider range points both at start of bar when rendered

Steps to reproduce

html `

<div ng-controller="BudgetCtrl" class="md-accent"> <article> Min Value:
Max Value:
<rzslider rz-slider-model="minRangeSlider.minValue" rz-slider-high="minRangeSlider.maxValue" rz-slider-options="minRangeSlider.options"></rzslider> </article> </div>`

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]

This is a different library, you should open an issue there.

[hardik-singhal]

VentuoRocket/angular Slider https://github.com/Venturocket/angular-slider