angular jquery-ui slider two way binding not working

Question

I'm making the jquery-ui slider into a directive and got it working when you slide the slider, it updates the model.

However, I'm trying to make it so when you also have an input box and input the value, it updates the ui slider itself.

I got this from a previous stack-overflow thread with my similar issue

<div ng-app="myApp">
    <div ng-controller="SomeController">
        Price: {{price}}
        <div slider config="sliderConfig" model="price" class="cdbl-slider"></div>
        <input type="input" ng-model="price">
    </div>
</div>

js

var myApp = angular.module("myApp", []);

myApp.controller("SomeController", function($scope) {
    $scope.sliderConfig = {
        min: 50,
        max: 500,
        step: 1
    }

    $scope.price = 50;

    $scope.setPrice = function(price) {
        $scope.price = price;    
    }
});

    myApp.directive("slider", function() {
        return {
            restrict: 'A',
            scope: {
                config: "=config",
                price: "=model"
            },
            link: function(scope, elem, attrs) {
                var setModel = function(value) {
                    scope.model = value;   
                }

                $(elem).slider({
                    range: false,
                    min: scope.config.min,
                    max: scope.config.max,
                    step: scope.config.step,
                    slide: function(event, ui) { 
                        scope.$apply(function() {
                            scope.price = ui.value;
                        });
                    }
                });
            }
        }
    });

You can see when you update the input value - the slider doesn't go to the typed value. So, I tried adding change method to the slider with the same properties as slide with the $apply setting the ui.value to scope.value but that didn't work. I also tried a $watch function that updated the ui-value whenever the ng-model changed but that also didn't work.

Any ideas?

Garuuk · Accepted Answer · 2015-03-10 23:07:41Z

1

I added a $watch function that watched for 'price' in the link function in the directive. Then I just used $(elem).slider('value', scope.price) to set the value.

answered Mar 10, 2015 at 23:07

Garuuk

2,2946 gold badges34 silver badges61 bronze badges

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

Comments

HTML · Accepted Answer · 2015-12-01 11:21:42Z

Here's an inline link. Its working and you can check
http://jsfiddle.net/suyog/xfouvdwh/

var myApp = angular.module("myApp", []);
myApp.controller("SomeController", function($scope) {
    $scope.sliderConfig = {
        min: 50,
        max: 500,
        step: 1     
    }     
    $scope.price = 50;
});

myApp.directive("slider", function() {
    return {
        restrict: 'AE',
        scope: {
            config: "=config",
            price: "=model"
        },
        link: function(scope, elem, attrs) {
            var setModel = function(value) {
                scope.model = value; 
            }            
            $(elem).slider({
                range: false,
	            min: scope.config.min,
	            max: scope.config.max,
                step: scope.config.step,
                slide: function(event, ui) { 
                    scope.$apply(function() {
                        scope.price = ui.value;
                    });
	            }
	        });           
            scope.$watch('price', function(newValue, oldValue) {
                if (newValue !== null && newValue !== undefined){
                    $(elem).slider('value', scope.price);
                }
            }, true);
             
    	}
    }
});

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css" rel="stylesheet">
<body >
    <div ng-app="myApp">
    <div ng-controller="SomeController">
        <input type="number" ng-model="price" />
        Price: {{price}} 
        <div id="mySlider" slider config="sliderConfig" model="price" class="cdbl-slider"></div>
    </div>
</div>
    </body>

Collectives™ on Stack Overflow

angular jquery-ui slider two way binding not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related