Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery Mobile Slider change event
    primarykey
    data
    text
    <p>I have a jquery mobile slider on a simple page. When I drag the slider, the value updates as expected in the textbox. I have looked but cannot find where this logic is happening. </p> <p>What I would like, is to pass the value into a javascript function. How can I bind the change event to my function?</p> <p>Cheers</p> <p>Mike.</p> <p>Code below - please ignore some nasty hacks: </p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;jQuery Mobile Docs - Forms&lt;/title&gt; &lt;link rel="stylesheet" href="fader/jquery.mobile-1.0a3.css" /&gt; &lt;script type="text/javascript" src="fader/jquery-1.5.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="fader/jquery.mobile-1.0a3.js"&gt;&lt;/script&gt; &lt;script&gt; $('#slider-1').changed(function () { alert("Test"); }); &lt;/script&gt; &lt;style type="text/css"&gt; .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 &gt; 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 &gt; * { 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; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="ui-body-a" data-role="page"&gt; &lt;div class="toolbar"&gt; &lt;h1&gt;Input&lt;/h1&gt; &lt;A class="back" HREF="javascript:javascript:history.go(-1)"&gt;Home&lt;/A &gt;&lt;/div&gt; &lt;form action="#" method="get"&gt; &lt;div class="ui-body-a" data-role="fieldcontain"&gt; &lt;h1&gt;Lighting Intensity&lt;/h1&gt; &lt;input type="range" name="slider-1" id="slider-1" value="0" min="0" max="100" data-theme="b" data-track-theme="a" orientation="vertical" /&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt;&lt;!-- /content --&gt; &lt;/div&gt;&lt;!-- /page --&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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