slider ng-change no good - what is the correct command?

[Peter Scargill]

So I have a slider - actually a set of them as below - in a template

<md-slider ng-model="msg.payload.g" ng-change="send(msg)" flex="30" min="0" max="255" class="slider-green">

    </md-slider>  &nbsp;&nbsp;&nbsp;

The problem is every time you make the slightest change - an output is generated - and this makes for a very jerky control.

What I need is the equivalent of ng_mouseup  - so that the function send() only gets called when the slider is RELEASED.  I'm not a whiz at this and looking at the list I can't see which that would be. using ng_mouseup - has no effect BUT the slider is very smooth!

Ideas anyone?

[David Miles]

Not a direct answer to your question, Pete, but the way I deal with this is to use rbe node in Node-Red and set it to "block unless value changes by more than" with a value of 2. That does the trick for me, using a slider that goes from 0 to 31 (those being the min/max settings used by the RF remote control dimmer switch I'm controlling.

David

[Peter Scargill]

Good – but not quite it – I think it’s the internal stuff going on that is causing the wobbling of the control – good try though

--
You received this message because you are subscribed to a topic in the Google Groups "Node-RED UI" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/node-red-contrib-ui/tFYTiFITykI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to node-red-contri...@googlegroups.com.
To post to this group, send email to node-red-...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red-contrib-ui/e9cfd4cd-ad89-4c24-920b-d35329b19538%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[peter adshead]

What is flex ? ,

On Saturday, 26 March 2016 14:38:14 UTC, Peter Scargill wrote:

[Ivan Ivanov]

Peter, I had the same issue and found the solution in the Angular Material slider docs. All you have to do, is add an md-discrete attribute to your <md-slider>, as in:

<md-slider md-discrete ng-model="msg.payload.g" ng-change="send(msg)" flex="30" min="0" max="255" class="slider-green">

    </md-slider>

And you're done! This does 2 things. One, the selected slider value is only sent when you release the slider! And two, as you touch the contorl dot it transforms to a teardrop showing the value above (for horizontal sliders) and beside (for vertical sliders) which I find very useful!

Give it a try. Here's a demo from the Angular Material docs. Look at the last demo, last slider bottom right labeled Master:

https://material.angularjs.org/latest/demo/slider

P.S. Love the blog! Thanks for spreading your knowledge!

[Ivan Ivanov]

Peter Adshead, flex is an attribute used in flexbox layouts. See:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/