Geek Answers Handbook

JQuery Slider Change Event

I have a jquery mobile slider on a simple page. When I drag the slider, the value is updated, as expected in the text box. I looked, but I can not find where this logic occurs.

I want to pass a value to a javascript function. How to associate a change event with my function?

Greetings

Mike.

Code below - please ignore some nasty hacks:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery Mobile Docs - Forms</title> <link rel="stylesheet" href="fader/jquery.mobile-1.0a3.css" /> <script type="text/javascript" src="fader/jquery-1.5.js"></script> <script type="text/javascript" src="fader/jquery.mobile-1.0a3.js"></script> <script> $('#slider-1').changed(function () { alert("Test"); }); </script> <style type="text/css"> .toolbar { -webkit-box-sizing: border-box; border-bottom: 1px solid #000; padding: 10px; height: 45px; background: url(fader/Resources/Themes/JQT/img/toolbar.png) #000000 repeat-x; position: relative; } .toolbar > h1 { position: absolute; overflow: hidden; left: 50%; top: 10px; line-height: 1em; margin: 1px 0 0 -75px; height: 40px; font-size: 20px; width: 150px; font-weight: bold; text-shadow: rgba(0, 0, 0, 1) 0 -1px 1px; text-align: center; text-overflow: ellipsis; white-space: nowrap; color: #fff; } .button, .back, .cancel, .add { position: absolute; overflow: hidden; top: 8px; right: 10px; margin: 0; border-width: 0 5px; padding: 0 3px; width: auto; height: 30px; line-height: 30px; font-family: inherit; font-size: 12px; font-weight: bold; color: #fff; text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0; text-overflow: ellipsis; text-decoration: none; white-space: nowrap; background: none; -webkit-border-image: url(fader/Resources/Themes/JQT/img/button.png) 0 5 0 5; } body > * { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1e1f21), to(#272729)); } .back { left: 6px; right: auto; padding: 0; max-width: 55px; border-width: 0 8px 0 14px; -webkit-border-image: url(fader/Resources/Themes/JQT/img/back_button.png) 0 8 0 14; } .back.active { -webkit-border-image: url(Fader%20Test%20-%20Trade%20show/img/back_button_clicked.png) 0 8 0 14; color: #aaa; } h1, h2 { font: bold 18px Helvetica; text-shadow: rgba(255, 255, 255, .2) 0 1px 1px; color: #FFF; margin: 10px 20px 5px; } body { background: #000; color: #ddd; } </style> </head> <body> <div class="ui-body-a" data-role="page"> <div class="toolbar"> <h1>Input</h1> <A class="back" HREF="javascript:javascript:history.go(-1)">Home</A ></div> <form action="#" method="get"> <div class="ui-body-a" data-role="fieldcontain"> <h1>Lighting Intensity</h1> <input type="range" name="slider-1" id="slider-1" value="0" min="0" max="100" data-theme="b" data-track-theme="a" orientation="vertical" /> </div> </form> </div><!-- /content --> </div><!-- /page --> </body> </html>
+8
javascript jquery html mobile slider
source share
10 answers

Michael. Try to surround the slider with another element:

 <div id="div-slider"> <input type="range" id="slider-1" /> </div>

And you can get a change event:

 $("#div-slider").change(function() { var slider_value = $("#slider-1").val(); // do something.. });
+23
source share

The problem with your code is that the javascript that binds the change event to the elements is evaluated to , they were actually created in html, so no element is attached to the change event, as you indicated.

Try the following:

 $('#slider-1').live('change', function(){ doYourStuffHere(); });

In short, live means that jQuery will continue to bind events with elements matching the specified selector, even if they were not present during the JS evaluation for the binding, so this code will bind all present and future html that correspond to the # slider-1 selector with the corresponding callback changes.

Another alternative is to use the jQuery 'on' binding, which acts a little differently, but can still do the job. See the documentation for 'on' here .

+7
source share

I highly recommend checking out the w3schools tutorial on this.

http://www.w3schools.com/jquerymobile/jquerymobile_events_intro.asp

An important piece of code that you are missing is

 $(document).on("pageinit","#pageone",function(){ // PLACE ALL YOU EVENTS CODE HERE eg $( "#slider" ).on( 'slidestop', function( event ) { alert ('hi'); }); }

Make sure your content has a prefix:

 <div data-role="page" id="pageone"> <div data-role="content"> <input type="range" name="slider" id="slider" value="10" min="0" max="100"> </div> </div>
+3
source share

Use this code,

 $( ".mySliders" ).slider({ create: function (event, ui) { $(this).bind('change', function () { }); } });

Do not put type="range" in your input tags; instead, put type="text" .

Since you call the slider function manually.

+1
source share

The documentation seems to be missing. After a long search, I found that getting a new value in the event handler requires something like $(this).slider().val() (additional slider() part omitted almost everywhere):

 $("#div-slider").change(function() { var slider_value = $(this).slider().val(); // do something.. });
+1
source share

I had the same problem, too many problems with the slider event. Finally, I found a slidestop event that works great. This is the code:

 $( "#slider-1").on('slidestop', function( event ) { var slider_value=$("#slider-1").slider().val(); alert('Value: '+slider_value); });

I hope this work is for you

+1
source share

I'm not too familiar with jquery mobile, but adding a change handler to the original input element should be done:

 $('#slider-1').change(function(){ var slider_value = $(this).val() console.log(slider_value) // do whatever you want with that value... })

Hope this help

Martin

0
source share

try the following:

 var self = this; this.sliderTouchUp = function() { var currentVal = $('#slider-1').val(); console.log("val change to " + currentVal); }; $('.ui-slider').live('mouseup', self.sliderTouchUp); $('.ui-slider').live('touchend', self.sliderTouchUp);
0
source share

The shortest and most functional.

 $('body').change(function() { var slider_value = $('#slider-1').val(); if(slider_value == 4000){ alert("Holy smoke!"); } }
0
source share

I use this code and it works in jQuery mobile 1.4.3.

 $(".ui-slider").on('change', function(event) { var valuenow = $(this).find(".ui-slider-handle").attr("aria-valuenow"); console.log(valuenow); });
0
source share

More articles:


All Articles