title: How to change CSS color values in real-time off a javascript slider?
body: <p>I'm making a page where the user gets a javascript slider that goes from 0 to 100 and can use it to set the opacity of a div on the page.</p>
  
  <p>I want the opacity of that div to change in real-time as they work the slider.  I've not done this before.  What's the best approach?</p>
  
  <p>There cursor in the slider displays the slider's current value as you move it.  It seems to be that I just need to find a way to display that value in any arbitrary other place on the page so I can display it in the style settings for the div.</p>
  
  <p>The .js file that generates the slider has a line that (I think) is setting the current value in the cursor:</p>
  
  <pre><code>$(this).children(".ui-slider-handle", context).html(parseInt(settings[index]['default']));
  </code></pre>
  
  <p>TO get this changing number to display somewhere else at the same time, do I just need to add a div somewhere and then add a line like this?</p>
  
  <pre><code>$("#newDivId").children(".ui-slider-handle", context).html(parseInt(settings[index]['default']));
  </code></pre>
  
  <p>That seems like it would give me the number showing up in a div.  How then would I get it into a form I could put into the style settings for a div?</p>
  
  <p>If this was a php variable, I would do something like this, </p>
  
  <pre><code>style="opacity:&lt;?php print $value ?&gt;;"
  </code></pre>
  
  <p>What would be the .js equivalent?</p>