Div background color by slider position

Ho can I bind the background color of a div to the current position of a slider, so that the div changes the color in a specified range depending on the position of the slider? Do I have to use $watch? Oberserver pattern anyone?


you can use ng-style to bind variables to css in AngularJS.
If you want to, you can also do this by setting css on the element through a directive


Great, thanks for the tip. How would I integrate a function like this into the style?

var colorFromSliderValue = function(sliderValue)

First convert your colorFromSliderValue to a color value, for example:

var color={'background-color':rgba(red, green, blue, opacity)};

values range from 0-255 and opacity 0-1.

then in your html you can do this:
<div ng-style="color">your element</div>

It’s all in the links above.

My function returns “{background-color:rgb(255,255,0);}” , but now I am getting the error below, everytime I assign the rgb string to the variable that’s observed by ngStyle. Do I have to convert it to some object?

TypeError: name.replace is not a function
at camelCase (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11098:5)
at forEach.css (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11541:12)
at Object.JQLite.(anonymous function) [as css] (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11667:9)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:33610:57
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:9022:20)
at ngStyleWatchAction (http://localhost:8100/lib/ionic/js/ionic.bundle.js:33610:7)
at Object.$watchCollectionAction [as fn] (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22809:13)
at Scope.$digest (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22942:29)
at Scope.$apply (http://localhost:8100/lib/ionic/js/ionic.bundle.js:23205:24)
at $$debounceViewValueCommit (http://localhost:8100/lib/ionic/js/ionic.bundle.js:31961:14)

Ok, fixed it. The value must be an object, and I had it as a complete string. Thanks for the help!