darul75 / angular-awesome-slider

:arrows_clockwise: Angular slider control directive
http://darul75.github.io/angular-awesome-slider/
MIT License
144 stars 63 forks source link

Unable to slide the actul range when i set to value of the slider dynamically #26

Closed charudatta1 closed 9 years ago

charudatta1 commented 10 years ago

Hi,

Initially i have set the values for slider control as below. it works fine. var pageCount = 56; bindSliderControl(1, 1, pageCount);

Now when i set new values var pageCount = 21; bindSliderControl(1, 1, pageCount);

Now i can see on slider from and to value but when i slide i will get previous range only. can you please help me with this issue.

function bindSliderControl(currentSliderValue, fromValue, toValue) {

    //Slider control setting
    $scope.sliderValue = currentSliderValue;
    $scope.sliderFromValue = fromValue;
    $scope.sliderToValue = toValue;

    if (toValue > 1) {
        $scope.stepValue = 1;
    }
    else {
        $scope.stepValue = 0;
    }
    $scope.options = {
        from: $scope.sliderFromValue,
        to: $scope.sliderToValue,
        step: $scope.stepValue,
        dimension: ""
    };
}
darul75 commented 10 years ago

Hi, leaving on holidays tomorrow I will check what I can do when back. Thanks for feedback, I guess all slider has to be re rendered when limits change.

charudatta1 commented 10 years ago

How do i rendered complete slider on page?

charudatta1 commented 10 years ago

actully i calling bindSliderControl every time to values changes to anyways the slider control is re-renders. do you have any other way to rerender it?

darul75 commented 10 years ago

I do not remember well but you can read following lines 83 to 87 from

https://github.com/darul75/ng-slider/blob/master/src/ng-slider.js

normally it will force redraw scale

timeout(function() {
 $("#"+attrs.id).slider(OPTIONS);
 $('#'+scope.sliderScaleDivTmplId).html(scope.generateScale());
 scope.drawScale();
});
mooj commented 10 years ago

check this in ng-slider.js:97

// WATCH OPTIONS CHANGES

                scope.$watch('options', function(value) {
                    scope.init();
                }, true);

however the jQeury Slider has already set options so init doesn't help here. unless you make a workaround in template calling span labels with id to easier read range later in Slider.prototy.onstatechange something like this:

Slider.prototype.onstatechange = function(){ if(Slider.prototype.hasLimitChanged(this)){ this.settings.to= parseInt($("#sliderRangeTo").text()); this.settings.from= parseInt($("#sliderRangeFrom").text()); this.settings.interval=(this.settings.to - this.settings.from) - (this.settings.to - this.settings.from)%this.settings.step; this.settings.value=this.settings.from +";"+this.settings.interval; this.redrawLimits(); this.update(); }

};

Slider.prototype.hasLimitChanged = function(this_){
    if (this_.is.init){
        var toSameVal= this_.settings.to == parseInt($("#sliderRangeTo").text());
        var fromSameVal = this_.settings.from ==parseInt($("#sliderRangeFrom").text()); 
        return !fromSameVal || !toSameVal;
    }
    return false;
};
darul75 commented 9 years ago

hi @mooj could check with this new version 0.1.7 and give me a feedback, thanks in advance, a change in model was indeed not updated to slider component, and slider was created several times for nothing. #35