CODEWITHSUNDEEP
jquery-uiangularjsangular-ui
Doron Goldberg
Doron Goldberg

Reputation: 653

$scope.slider - not updated

I have a jquery-ui slider which updates a textbox with the slider's value.

the textbox has ng-model so I can get the value from the controller - but the value is not updated after the slider is moved (the value is changing inside the textbox visually, but $scope.slider remains the same).

If I change the value manually inside the textbox everything is working as expected and the value of $scope.slider is updated with the new value.

Is there a way to make the slider update the value for the scope as well?

   <input type="text" id="rent"  ng-model="rent" style="border: 0; color: #f6931f; font-weight: bold;" />
  <div id="slider-rent" style="width: 80%;"></div>

  $("#slider-rent").slider({
        range: false,
        min: 0,
        max: 20000,
        step: 10,
        value: 0,
        slide: function (event, ui) {
            $("#rent").val(ui.value);
        }
    });
    $("#rent").val($("#slider-rent").slider("value"));
    $("#rent").change(function () {

        $("#slider-rent").slider("value", $("#rent").val());
    });

(This is a rtl slider, this is why the values are negative)

Upvotes: 2

Views: 1496

Answers (2)

Mark Rajcok
Mark Rajcok

Reputation: 364687

Try this:

slide: function (event, ui) {
    $scope.rent = ui.value;

}

The above assumes the code you show is inside/wrapped in a directive.

Upvotes: 0

charlietfl
charlietfl

Reputation: 171679

It would be better to put your slider code into an angular directive so you can access the controller scope.

However if you trigger input event on the input element it will update the angular model

function updateInputValue( newVal){
     $("#rent").val(newVal).trigger('input');    
}

$(function () {
    $("#slider-rent").slider({
        range: false,
        min: 0,
        max: 20000,
        step: 10,
        value: 0,
        slide: function (event, ui) {
            updateInputValue(ui.value);
        }
    });
    updateInputValue($("#slider-rent").slider("value"));
    $("#rent").change(function () {
        $("#slider-rent").slider("value", $("#rent").val());
    });
})

DEMO:http://jsfiddle.net/zwHQs/

Upvotes: 3

Related Questions