JQuery UI slider 'slide' function not setting angularJS value

Question

I'm trying to display the slider values below it by capturing the values from the Slide function and setting it to AngularJS $scope variables but it isn't working.

This is my JS code snippet:

$( "#price-slider" ).slider({
    range: true,
    min: 0,
    max: 1000000,
    values: [ 10000,  500000],
    slide: function( event, ui ) {
        $scope.price_gt = ui.values[0];
        $scope.price_lt = ui.values[1];
    }
});

HTML:

<div id="price-slider"></div>
<p style="text-align: center">&#8377; {{price_gt}} - &#8377; {{price_lt}}</p>

Can anybody please help me understand where I'm going wrong? I basically need to get the value dynamically as the user moves the slide and display it.

Marinha do Nascimento · Accepted Answer · 2016-08-26 20:40:35Z

2

try this

<input type="text" id="price_gt" size="auto" readonly style="border:0; color:black; font-weight:bold;  width:100% " />

answered Aug 26, 2016 at 20:40

Marinha do Nascimento

8088 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

javaGirl243 Over a year ago

This does not help at all and is not how AngularJS works AFAIK

javaGirl243 · Accepted Answer · 2016-08-27 09:47:01Z

0

Turns out the issue was with AngularJs and not JQuery Slider.

Making this change solved my problem:

slide : function(event, ui) {
            $scope.$apply(function() {
                $scope.price = {
                        lower_limit : ui.values[0],
                        upper_limit : ui.values[1]
                };
            });
        }

answered Aug 27, 2016 at 9:47

javaGirl243

993 silver badges15 bronze badges

Collectives™ on Stack Overflow

JQuery UI slider 'slide' function not setting angularJS value

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related