How to change CSS color values in real-time off a javascript slider?
- by bflora
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.
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:
$(this).children(".ui-slider-handle", context).html(parseInt(settings[index]['default']));
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?
$("#newDivId").children(".ui-slider-handle", context).html(parseInt(settings[index]['default']));
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?
