Menu icon Foundation
Range Slider in Foundation 6 - problem with update html

Hi, I have a problem with range slider. I want to know how is the current value of range slider and I can do this like below: 

 

    $('.slider').on('changed.zf.slider', function(){

        $scope.filters.distance = Number(($(this).children('.slider-handle').attr('aria-valuenow')));

        console.log($scope.filters.distance)

    });

 

And it doing great, in a console I can see the current value of my slider. But when I want to display this value on HTML, I have a strange problem. I use angular, so I try to display it like [[filters.distance]], but this value update only when I scroll a page. 

So it works like that: I move the slider, console show current value, but this value on template show only after I scroll a page... I spend many hour for debugging this but I don't know where is a problem. Thanks for any help.

 

range sliderfoundation 6

Hi, I have a problem with range slider. I want to know how is the current value of range slider and I can do this like below: 

 

    $('.slider').on('changed.zf.slider', function(){

        $scope.filters.distance = Number(($(this).children('.slider-handle').attr('aria-valuenow')));

        console.log($scope.filters.distance)

    });

 

And it doing great, in a console I can see the current value of my slider. But when I want to display this value on HTML, I have a strange problem. I use angular, so I try to display it like [[filters.distance]], but this value update only when I scroll a page. 

So it works like that: I move the slider, console show current value, but this value on template show only after I scroll a page... I spend many hour for debugging this but I don't know where is a problem. Thanks for any help.