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?
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.
The .js file that generates the slider has a line that (I think) is setting the current value in the cursor:
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?
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?
If this was a php variable, I would do something like this,
style="opacity:<?php print $value ?>;"
What would be the .js equivalent?
The jQuery UI Documentation has an example of a colorpicker with the slider widget. You should be able to grok it and adapt it for opacity.
Here is a working example that I threw together using the color picker example as a base: http://jsfiddle.net/6VgzT/