Div background color by slider position

elduderino15 · January 15, 2016, 1:42am

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?

whizzkey · January 15, 2016, 6:45am

Hi,

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

https://docs.angularjs.org/api/ng/directive/ngStyle
http://fdietz.github.io/recipes-with-angular-js/directives/changing-the-dom-in-response-to-user-actions.html

elduderino15 · January 15, 2016, 6:48am

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

var colorFromSliderValue = function(sliderValue)

whizzkey · January 15, 2016, 7:09am

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.

elduderino15 · January 15, 2016, 8:05pm

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?

elduderino15 · January 15, 2016, 9:07pm

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