Add directive for slider of JQuery UI #252

Closed
JosefJezek opened this Issue Nov 1, 2012 · 46 comments

Projects

None yet
@JosefJezek

Like this http://jsfiddle.net/vNfsm/50/

Thank you

@joshkurz
Member
joshkurz commented Dec 3, 2012

what about this instead? http://plnkr.co/edit/kd6obP?p=preview They do the same thing, expect this one works on slide rather than change, and is a little more simple.

@ProLoser
Member
ProLoser commented Dec 3, 2012

Neither of these are correct. You need to use the ngModel controller for
retrieving and setting the model value.

I would also add an option to specify if the model should be updated
constantly (while sliding) or just when you let go for performance sake.

On Sun, Dec 2, 2012 at 10:40 PM, Josh Kurz notifications@github.com wrote:

what about this instead? http://plnkr.co/edit/kd6obP?p=preview They do
the same thing, expect this one works on slide rather than change, and is a
little more simple.


Reply to this email directly or view it on GitHubhttps://github.com/angular-ui/angular-ui/issues/252#issuecomment-10942998.

Dean J Sofer
DeanSofer@gmail.com

BS Computer Information Systems
California State Polytechnic University, Pomona
Telephone: 714-900-2254
Website: www.DeanSofer.com
Github: github.com/ProLoser

@joshkurz
Member
joshkurz commented Dec 3, 2012

I agree Dean. Use NgModel and There should be an extra attribute added into
the directive that allows the user to choose either.

On Mon, Dec 3, 2012 at 4:02 AM, Dean Sofer notifications@github.com wrote:

Neither of these are correct. You need to use the ngModel controller for
retrieving and setting the model value.

I would also add an option to specify if the model should be updated
constantly (while sliding) or just when you let go for performance sake.

On Sun, Dec 2, 2012 at 10:40 PM, Josh Kurz notifications@github.com
wrote:

what about this instead? http://plnkr.co/edit/kd6obP?p=preview They do
the same thing, expect this one works on slide rather than change, and
is a
little more simple.


Reply to this email directly or view it on GitHub<
https://github.com/angular-ui/angular-ui/issues/252#issuecomment-10942998>.

Dean J Sofer
DeanSofer@gmail.com

BS Computer Information Systems
California State Polytechnic University, Pomona
Telephone: 714-900-2254
Website: www.DeanSofer.com
Github: github.com/ProLoser


Reply to this email directly or view it on GitHubhttps://github.com/angular-ui/angular-ui/issues/252#issuecomment-10945523.

Josh Kurz
*
Head of Web Development*
SEO
Social Media
Digital Photography
Internet Marketing

cell# 404-641-7807
office# 404-593-0851
fax# 404-506-9642
*Dillinger Media *
http://dillingermediaonline.com/wordpresshttp://dillingermediaonline.com

@garethdjames

Is anyone working on this as an NgModel? I will have a look if no one is

@joshkurz
Member
joshkurz commented Dec 9, 2012

go for it...

@ProLoser
Member

Doesn't passthru handle this okay now?

@joshkurz
Member

like 50%. http://plnkr.co/edit/0yB8p9?p=preview It wont show the second slider option. I might just be doing it wrong.

here is a working version not using ui-jq. http://plnkr.co/edit/vbTSZM?p=preview

@ProLoser ProLoser closed this Feb 16, 2013
@bramcordie

I just tried ProLoser's solution. Moving the slider applies the changes real-time but when I change the values of the slider from somewhere else inside the controller the slider doesn't update its position. There only seems to be a one way binding.

@ProLoser
Member

Yes, it's one way only atm.

I have been thinking about a new enhancement to ui-jq that lets you specify a refresher function. At the same time, it may be a growing concern as to how much we are circumventing angular.

Theoretically it would pass in a reference to the DOM element and the new value of the refresh expression. You would then be able to do whatever you want to the DOM element.

@bblechman

I'm new to Angular, and have been banging my head against this issue for hours. I just found this thread, and it's been helpful. Is there any way around the issue of the slider not updating when values are changed from outside, even if it's not automatic with binding?

@bramcordie

If you really need to use the jQuery slider you can write a setter method that also update's the slider when the value is changed.
I ended up making my own slider with the angular mouse events. It's still work in progress and has some app specific stuff hard coded. If I find the time I'll try to make it stand alone and share the code.

@Sally-Xu

I modified code based on (http://plnkr.co/edit/vbTSZM?p=preview) made two-way binding slider work: http://plnkr.co/edit/DxVTJi?p=preview
I also made a single value slider vs range slider:

@JosefJezek

Nice work. Could you convert this code to angular ui bootstrap without jquery? ;-)

@chytreg
chytreg commented Apr 30, 2013

Hi, why this issues is closed? Have you decide to not add the jquery slider support to angular-ui?

@johnparn

I changed sladapter's code a bit as it relied on jquery DOM manipulation to do the two-way binding which caused problems when using a slider and assigning a value to ng-model within a ng-repeat for me. The consequense is that the handles of all sliders are moved (see example of problem here: http://plnkr.co/edit/rdStDj?p=preview).

Here is my update, however there is plenty of room for improvement:

http://plnkr.co/gqLh8PreNMBcAeXeRZF7

@AzurInspire

Modified johnparn's code with possibility to set min, max and step from controller; it works but I'm not sure if this is the best way to do it...

http://plnkr.co/edit/A2dJ1f?p=preview

@ProLoser
Member

Okay since thread just won't die, who wants to take lead: https://github.com/angular-ui/ui-slider ? Any volunteers? I can give feedback and review but I will not be doing the implementation myself.

@AzurInspire

I can jump in, though I'm quite inexperienced with GitHub, but shouldn't be so big problem with 15 years of development background.

@johnparn

Hi!

I'm the guilty one for the code donbono modified and there is most likely
quite a lot of improvements to be done. If you need some assistance I'm
willing to help. However, I've started quite recently with angular and I'm
not yet comfortable with all the tools of trade, but I sure like to learn
more.

// John

2013/6/11 Kalle Pyörälä notifications@github.com

I can jump in, though I'm quite inexperienced with GitHub, but shouldn't
be so big problem with 15 years of development background.


Reply to this email directly or view it on GitHubhttps://github.com/angular-ui/angular-ui/issues/252#issuecomment-19253845
.

@ProLoser
Member

@johnparn i added you to the team, go ahead and stub out the project. I recommend following examples set forth in some of the other ui-projects. @douglasduteil may be able to help you get setup with the demo-generator

@johnparn

Ok.

// John

2013/6/11 Dean Sofer notifications@github.com

@johnparn https://github.com/johnparn i added you to the team, go ahead
and stub out the project. I recommend following examples set forth in some
of the other ui-projects. @douglasduteilhttps://github.com/douglasduteilmay be able to help you get setup with the demo-generator


Reply to this email directly or view it on GitHubhttps://github.com/angular-ui/angular-ui/issues/252#issuecomment-19289938
.

@Swader
Swader commented Jun 28, 2013

Inspired by this answer: http://stackoverflow.com/questions/17264390/changes-in-jquery-ui-not-reflected-on-angular-models I made my own hacked version that supports both range and non-range sliders, and features two way binding. Hope it's useful to someone until something more official/internal appears: https://github.com/Swader/ngdirectives

@johnparn

I've recently added a slider skeleton to the Angular UI project: https://github.com/angular-ui/ui-slider

However, ranges are lacking and the code needs to be reviewed. Perhaps with joined forces we could end up with something good, Unfortunately I haven't had time to progress with the slider as expected, I've only made an initial commit.

@ProLoser
Member

@Swader maybe you'd like to open a PR on the repo?

@Swader
Swader commented Jun 28, 2013

Roger that. Ran into a bug, will do as soon as I make it failproof.

@Swader
Swader commented Jun 28, 2013

Done, works like a beast. Need to figure out the grunt process, will submit PR as soon as I become familiar with it. In the meanwhile, all the code is here, and I'll make a demo soon, too.

@Swader
Swader commented Jun 28, 2013

Curses, ran into another bug. The slider directive I made supports only one-dimensional models, so you can't put searchData.mySliderValue as the model attribute, only mySliderValue. Any help with this would be greatly appreciated, I've been battling this for far too long now, even tried this solution but it only function as a getter, not a setter: http://stackoverflow.com/questions/6393943/convert-javascript-string-in-dot-notation-into-an-object-reference

If someone can figure out how to make it support multi-dimensional models send me a PR please, that's the only missing piece - everything else works rather well.

@ProLoser
Member

@Swader I'm sorry to say this but you shouldn't try pushing your entire existing code-base. Instead, try transferring features to the existing code base.

@johnparn you did 'require': 'ngModel' but you didn't do anything with it. Instead the controller argument is set to uiEvent and you don't use it at all.

You guys should be leveraging the ngModelController as it has features such as $render(), $viewValue and $modelValue

@Swader
Swader commented Jun 28, 2013

@ProLoser I'm not sure what you mean, pushing entire code base? The PR, once I get around to submitting it after I fix my issues, will definitely be in the form of an update, no sort of total conversion, if that's what you mean, I'll do my best to integrate into existing stuff.

Right, but the ngModel won't be of use when we need range - range would need two ngModels to update, so it can have a "from" and a "to" model populated on slide. This is why I've removed ngModel completely and replaced it with attributes, but this now indeed causes me grief in adding multi-dimensional models. Experimenting with scope.$eval on $parent now but it feels dirty...

@ProLoser
Member

You should not be isolating the scope. If you are evaluating on parent then
you REALLY shouldn't bother with scope isolation. If you review all the
other plugins, only plugins that use templates bother with creating an
isolated scope. Otherwise you're better off just manually doing
$attrs.observe or $scope.watch since you aren't really setting any scope
values other than the model itself.

On Fri, Jun 28, 2013 at 3:34 PM, Bruno Škvorc notifications@github.comwrote:

@ProLoser https://github.com/ProLoser I'm not sure what you mean,
pushing entire code base? The PR, once I get around to submitting it after
I fix my issues, will definitely be in the form of an update, no sort of
total conversion, if that's what you mean, I'll do my best to integrate
into existing stuff.

Right, but the ngModel won't be of use when we need range - range would
need two ngModels to update, so it can have a "from" and a "to" model
populated on slide. This is why I've removed ngModel completely and
replaced it with attributes, but this now indeed causes me grief in adding
multi-dimensional models. Experimenting with scope.$eval on $parent now but
it feels dirty...


Reply to this email directly or view it on GitHubhttps://github.com/angular-ui/angular-ui/issues/252#issuecomment-20218224
.

Dean J Sofer
DeanSofer@gmail.com

BS Computer Information Systems
California State Polytechnic University, Pomona
Telephone: 714-900-2254
Website: www.DeanSofer.com
Github: github.com/ProLoser

@ProLoser
Member

Also, why not simply make the value an array if it's a range? I think you
are wasting energy trying to circumvent ngModel.

On Fri, Jun 28, 2013 at 3:37 PM, Dean Sofer deansofer@gmail.com wrote:

You should not be isolating the scope. If you are evaluating on parent
then you REALLY shouldn't bother with scope isolation. If you review all
the other plugins, only plugins that use templates bother with creating an
isolated scope. Otherwise you're better off just manually doing
$attrs.observe or $scope.watch since you aren't really setting any scope
values other than the model itself.

On Fri, Jun 28, 2013 at 3:34 PM, Bruno Škvorc notifications@github.comwrote:

@ProLoser https://github.com/ProLoser I'm not sure what you mean,
pushing entire code base? The PR, once I get around to submitting it after
I fix my issues, will definitely be in the form of an update, no sort of
total conversion, if that's what you mean, I'll do my best to integrate
into existing stuff.

Right, but the ngModel won't be of use when we need range - range would
need two ngModels to update, so it can have a "from" and a "to" model
populated on slide. This is why I've removed ngModel completely and
replaced it with attributes, but this now indeed causes me grief in adding
multi-dimensional models. Experimenting with scope.$eval on $parent now but
it feels dirty...


Reply to this email directly or view it on GitHubhttps://github.com/angular-ui/angular-ui/issues/252#issuecomment-20218224
.

Dean J Sofer
DeanSofer@gmail.com

BS Computer Information Systems
California State Polytechnic University, Pomona
Telephone: 714-900-2254
Website: www.DeanSofer.com
Github: github.com/ProLoser

Dean J Sofer
DeanSofer@gmail.com

BS Computer Information Systems
California State Polytechnic University, Pomona
Telephone: 714-900-2254
Website: www.DeanSofer.com
Github: github.com/ProLoser

@Swader
Swader commented Jun 28, 2013

How do you bind an array to an ng-model? There is zero documentation on the matter, I had no idea one could do that. That would have solved all my problems half a day ago.

@johnparn

@ProLoser Right, the ngModelController is news for me. I will take a look at the other directives to get a hint of how it might be used.

Do you think the sliders, with and without range, are to two different beasts - ie should they be divided into two separate directives - ui-slider and ui-rangeslider (however they might be distributed in the same file) - or should it be one directive?

// John

@Swader
Swader commented Jun 29, 2013

@johnparn see answer here for ngModel and ngModelController usage. It's incompatible with multiple models though, that's why it makes it so difficult to implement range on top of it.

I think range and slider should be the same component. DRY, they are nearly identical in logic.

@ProLoser
Member

Again, you guys only need to work with an array of values and you will be
fine. That is even how jqui does it.

You are overthinking things by worrying about "multiple models".

I will see if I can push some notes later today.
On Jun 29, 2013 1:41 AM, "Bruno Škvorc" notifications@github.com wrote:

@johnparn https://github.com/johnparn see answer herehttp://stackoverflow.com/questions/17264390/changes-in-jquery-ui-not-reflected-on-angular-modelsfor ngModel and ngModelController usage. It's incompatible with multiple
models though, that's why it makes it so difficult to implement range on
top of it.

I think range and slider should be the same component. DRY, they are
nearly identical in logic.


Reply to this email directly or view it on GitHubhttps://github.com/angular-ui/angular-ui/issues/252#issuecomment-20226566
.

@Swader
Swader commented Jun 29, 2013

Thanks, a hint would be appreciated. Right now, I define models that get updated on slider change like an attribute on the element itself, like so: <div ... models="['rangeValue1', 'rangeValue2']" ... > but like I said, it doesn't let me use dot-nested values. But if I can somehow tell ngModel to use an array, that'd be great.

@ProLoser
Member

Again, overcomplicating:

ng-model="myValues"

$scope.myValues = [20, 80];
On Jun 29, 2013 1:58 AM, "Bruno Škvorc" notifications@github.com wrote:

Thanks, a hint would be appreciated. Right now, I define models that get
updated on slider change like an attribute on the element itself, like so: <div
... models="['rangeValue1', 'rangeValue2']" ... > but like I said, it
doesn't let me use dot-nested values. But if I can somehow tell ngModel to
use an array, that'd be great.


Reply to this email directly or view it on GitHubhttps://github.com/angular-ui/angular-ui/issues/252#issuecomment-20226745
.

@johnparn

How about using a javascript object, is that kosher?

Like

myRangeValues {
min: 1,
max: 100
}

// John

On 20130629,, at 11:02 , Dean Sofer wrote:

Again, overcomplicating:

ng-model="myValues"

$scope.myValues = [20, 80];
On Jun 29, 2013 1:58 AM, "Bruno Škvorc" notifications@github.com wrote:

Thanks, a hint would be appreciated. Right now, I define models that get
updated on slider change like an attribute on the element itself, like so: <div
... models="['rangeValue1', 'rangeValue2']" ... > but like I said, it
doesn't let me use dot-nested values. But if I can somehow tell ngModel to
use an array, that'd be great.


Reply to this email directly or view it on GitHubhttps://github.com/angular-ui/angular-ui/issues/252#issuecomment-20226745
.


Reply to this email directly or view it on GitHub.

@ProLoser
Member

Why? As I stated an array is how jquery UI does it, so there is no point in
overcomplicating it.
On Jun 29, 2013 2:48 AM, "johnparn" notifications@github.com wrote:

How about using a javascript object, is that kosher?

Like

myRangeValues {
min: 1,
max: 100
}

// John

On 20130629,, at 11:02 , Dean Sofer wrote:

Again, overcomplicating:

ng-model="myValues"

$scope.myValues = [20, 80];
On Jun 29, 2013 1:58 AM, "Bruno Škvorc" notifications@github.com
wrote:

Thanks, a hint would be appreciated. Right now, I define models that
get
updated on slider change like an attribute on the element itself, like
so: <div
... models="['rangeValue1', 'rangeValue2']" ... > but like I said, it
doesn't let me use dot-nested values. But if I can somehow tell
ngModel to
use an array, that'd be great.


Reply to this email directly or view it on GitHub<
https://github.com/angular-ui/angular-ui/issues/252#issuecomment-20226745>

.


Reply to this email directly or view it on GitHub.


Reply to this email directly or view it on GitHubhttps://github.com/angular-ui/angular-ui/issues/252#issuecomment-20227229
.

@Swader
Swader commented Jun 29, 2013

I managed to do it with arrays for models, works like a charm for non-range. But in range mode, I get this: http://stackoverflow.com/questions/17382770/accessing-javascript-property-yields-different-result-when-being-accessed-direct
I think this is a jQuery UI issue though, so as soon as I figure out what's going on that's that, the slider is done. Thanks for the pointers, @ProLoser

@ProLoser
Member

I will have to look at it but I am guessing that you are forgetting about
the asynchronous nature of angular and the plugin is not being initialized
with numbers.
On Jun 29, 2013 10:35 AM, "Bruno Škvorc" notifications@github.com wrote:

I managed to do it with arrays for models, works like a charm for
non-range. But in range mode, I get this:
http://stackoverflow.com/questions/17382770/accessing-javascript-property-yields-different-result-when-being-accessed-direct
I think this is a jQuery UI issue though, so as soon as I figure out
what's going on that's that, the slider is done. Thanks for the pointers,
@ProLoser https://github.com/ProLoser


Reply to this email directly or view it on GitHubhttps://github.com/angular-ui/angular-ui/issues/252#issuecomment-20233816
.

@Swader
Swader commented Jun 29, 2013

@ProLoser bingo! Added a create event handler to the whole mish mash and it works. Wrapping it up now.

@ProLoser
Member

Finally found some time today and managed to patch things together in about an hour.

Check the commit (and demo) I just pushed to ui-slider.

You will have to review the (commented) code and demo.html yourself

Do me a favor and update the readme, etc.

I do NOT want to just explicitly support each and every single option as an attribute, I merely added support for items that you would normally find on an <input> tag and nothing more.

@Swader
Swader commented Jun 30, 2013

Your range seems to have the same problem as mine - manually editing the input field does not move the slider.

This is what I use to update the slider when the model updates (i.e. a text field with one of the values is manually changed):

            // Update slider when view needs to be updated
            ngModel.$render = function () {
                console.log(ngModel);
                if (isRange) {
                    var values = (ngModel.$viewValue || []);
                    iElement.slider('values', values);
                } else {
                    var value = (ngModel.$viewValue || 0);
                    iElement.slider('value', value);
                }
            };

The console.log part triggers only when a non-range slider is used, never when a ranged one is.

Essentially, $render doesn't seem to trigger when the model is more than 1 level deep, be it an array or a sub-object in the main object.

@ProLoser
Member

@Swader fixed. Please discontinue conversation in this thread. If you find new bugs, open them on the repo.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment