Databases
StackOverflow2013
Postsdbo
PODifficulty setting the value of another form element from slider value
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODifficulty setting the value of another form element from slider value
    text
    copied!<p>I need to set the value of a slider if the value of another element changes and vice versa, but I'm having difficulty setting the value of another form element to the value of slider.</p> <p>The function below changes the Slider value when the value of the Select element is changed, but I can't get it to work in reverse. I've posted a fiddle of it here: <a href="http://jsfiddle.net/chayacooper/v3gUg/28/" rel="nofollow">http://jsfiddle.net/chayacooper/v3gUg/28/</a></p> <p>I'm using the <a href="http://egorkhmelev.github.com/jslider/" rel="nofollow">jQuery Slider Plugin</a>, jquery-1.8.2 and jquery-ui-1.9.1. </p> <p><em>JS</em></p> <pre><code>$(document).ready(function () { var select = $("#SliderSelect"); jQuery("#Slider").slider({ from: 1, to: 5, scale: ['Dislike', '', '', '', 'Love'], limits: false, step: 1, dimension: '', skin: "classic", change: function (evt) { $("#SliderSelect")[0].value = $(evt.target).slider("value"); } }); $("#SliderSelect").change(function () { jQuery("#Slider").slider("value", this.selectedIndex + 1); }); }); </code></pre> <p>I've also tried replacing the code with this statement and using a textbox instead of the select element, with the same result</p> <pre><code>$('#text_value').val( $(evt.target).slider("value") ); </code></pre> <p><em>HTML</em></p> <pre><code>&lt;div class="layout-slider"&gt; &lt;div id="Slider" type="slider" name="area" value="3"&gt;&lt;/div&gt; &lt;/div&gt; &lt;select name="SliderSelect" id="SliderSelect"&gt; &lt;option&gt;1&lt;/option&gt; &lt;option&gt;2&lt;/option&gt; &lt;option selected=selected&gt;3&lt;/option&gt; &lt;option&gt;4&lt;/option&gt; &lt;option&gt;5&lt;/option&gt; &lt;/select&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