StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Not sure if it's an unfortunate amount of code or not, but I'm inclined to think a decent option is to use a simple directive to create/hook-up the jQueryUI sliders. The simple directive cooked up below sets up a two-way binding between the 'value' attribute on the directive's scope and the 'value' attribute on the controller's scope. The template for the directive is simply the div that gets turned into the slider during the directive's link function, which also sets up a listener for the 'slide' event and copies the value to the scope. The $watch is also set up so that changes from the controller get pushed into the slider's state.</p> <p>You can view the following sample live via this JSBin (different from what I commented above): <a href="http://jsbin.com/ejojad/1/edit" rel="nofollow">http://jsbin.com/ejojad/1/edit</a></p> <p>HTML:</p> <pre><code><!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <div ng-app="myApp" ng-controller="Ctrl"> <input type="text" ng-model="value"/> <jqui-slider value="value"></jqui-slider> </div> </body> </html> </code></pre> <p>JavaScript:</p> <pre><code>function Ctrl($scope) { $scope.value = 0; } function jQuiSliderDirective() { return { restrict: 'E', scope: { value: '=value', }, template: '<div></div>', replace: true, link: function($scope, elem, attrs) { var slider = $(elem).slider(); slider.on('slide', function(event, ui) { $scope.$apply(function() { $scope.value = ui.value; }); }); $scope.$watch('value', function(val, old) { slider.slider('value', val); }); } }; } var myApp = angular.module('myApp', []); myApp.directive('jquiSlider', jQuiSliderDirective); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload