In a lot of CSS examples there is this scrollbar to edit the CSS
I can't find one article to do this,can someone explain how?
+3
A:
You can find some good examples of using the jQueryUI slider here: http://jqueryui.com/demos/slider/
Damien
2010-08-04 02:43:19
A:
OK, to make a slider change CSS:
$( "#slider" ).bind( "slidechange", function(event, ui) {
if (ui.value === 10) {
$("#idTochange").css('background-color','red')
//you can add any jQuery code you want to run here when the slider value = 10
} else if (ui.value === 15 {
$("#idTochange").css('background-color','green')
} else {
$("#idTochange").css('background-color','blue')
}
console.log(ui.value); //debug output of slider value, use this to change the if values above
});
Check http://jqueryui.com/demos/slider/ for detailed info on how to instantiate a slider, and how to access the information returned by jQueryUI
Bob Gregor
2010-08-04 02:43:38
Yes to modify CSS with the slider. Sorry I didn't explain much.
omnix
2010-08-04 02:51:01
Okay so where it says 'background-color' and 'blue' and etc is where I can replace and put in something like 'width' '13px'?
omnix
2010-08-05 12:35:45
Yes. That is where you can add jquery modifiers to the chain. See http://api.jquery.org/css
Bob Gregor
2010-08-05 21:31:10
Okay and then it'll edit the css when i'm moving the slider?
omnix
2010-08-07 05:21:01
Right. Depending on the value specified in the if else statements (they are checking the value of the slide thru ui.value
Bob Gregor
2010-08-10 03:09:59