Databases
StackOverflow2013
Postsdbo
POJQueryUI sliders not working on IE
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQueryUI sliders not working on IE
    text
    copied!<p>I've been trying to get a slider to display its current value next to the control. This tutorial <a href="http://www.ryancoughlin.com/demos/interactive-slider/" rel="nofollow">http://www.ryancoughlin.com/demos/interactive-slider/</a> explains how easy and painlessly. </p> <p>Now I am trying to set 3 consecutive sliders and works fine but IE is setting options to default values ( 0 to 100, step 1, animate false...) for all three controls. Works fine in FF and Chrome though.</p> <p>What am I missing? Thank you.</p> <p>Heres the code:</p> <pre><code> $('#slider-alpha').slider({ range : false, value : 5, step: 1, animate: "true", min: 1, max : 10, }); $('#slider-gamma').slider({ range : false, value : 50, step: 10, animate: "true", min: 1, max : 200, }); $('#slider-beta').slider({ range : false, values : 50, step: 10, animate: "true", min: 1, max : 300, }); &lt;script&gt; $(function() { //alpha var slide_int_alpha = null; var slide_int_beta = null; var slide_int_gamma = null; function update_slider_alpha(){ var value = $('#slider-alpha').slider('option', 'value'); $('#alpha-value').text('No. of alpha: '+value); $('#alpha-value').fadeIn(); } function update_slider_beta(){ var valuet = $('#slider-beta').slider('option', 'value'); $('#beta-value').text('No. of beta: '+valuet); $('#beta-value').fadeIn(); } function update_slider_gamma(){ var valuep = $('#slider-gamma').slider('option', 'value'); $('#gamma-value').text('No. of gamma: '+valuep); $('#gamma-value').fadeIn(); } $( "#slider-alpha" ).slider({ start: function(event, ui){ $('#alpha-value').empty(); slide_int_alpha = setInterval(update_slider_alpha, 10); }, slide: function(event, ui) { setTimeout(update_slider_alpha, 10); }, stop: function(event, ui){ clearInterval(slide_int_alpha); slide_int_alpha = null; } }); $( "#slider-beta" ).slider({ start: function(event, ui){ $('#beta-value').empty(); slide_int_beta = setInterval(update_slider_beta, 10); }, slide: function(event, ui) { setTimeout(update_slider_beta, 10); }, stop: function(event, ui){ clearInterval(slide_int_beta); slide_int_beta = null; } }); $( "#slider-gamma" ).slider({ start: function(event, ui){ $('#gamma-value').empty(); slide_int_gamma = setInterval(update_slider_gamma, 10); }, slide: function(event, ui) { setTimeout(update_slider_gamma, 10); }, stop: function(event, ui){ clearInterval(slide_int_gamma); slide_int_gamma = null; } }); }); &lt;/script&gt; &lt;div id="alpha-value"&gt;No. of alpha: 5&lt;/div&gt; &lt;div id="slider-alpha" style="width: 90%;text-align: center;"&gt;&lt;/div&gt; &lt;br /&gt; &lt;div id="beta-value"&gt;No. of beta: 20&lt;/div&gt; &lt;div id="slider-beta" style="width: 90%;text-align: center;"&gt;&lt;/div&gt; &lt;br /&gt; &lt;div id="gamma-value"&gt;No. of gamma: 20&lt;/div&gt; &lt;div id="slider-gamma" style="width: 90%;text-align: center;"&gt;&lt;/div&gt; &lt;br /&gt; </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