Use Slider to Change Image CSS Filter with Javascript

Question

I'm trying to change the css filter (hue-rotate to be exact) on a png by using a slider input. I keep getting "-webkit-filter:hue-rotate(undefineddeg)"

Thanks for your help!

Here's my code:

function hueFunction(hueVal) {
  var setAs = hueVal + "deg"
  document.getElementById("lgImage").setAttribute("style", "-webkit-filter:hue-rotate(" + setAs + ")")
}

<input type="range" data-default="0" value="0" min="0" max="360" step="1" id="hue-rotate" oninput="hueFunction(this.hueVal)">

<br/>

<img src="https://campstoregear.com/wp-content/uploads/2017/09/summer-camp-2018-apparel-design-CD1816-Primary.png" id="lgImage">

Zoltan Toth · Accepted Answer · 2017-10-03 20:40:04Z

2

Change oninput="hueFunction(this.hueVal)" to oninput="hueFunction(this.value)"

function hueFunction(hueVal) {
  var setAs = hueVal + "deg"
  document.getElementById("lgImage").setAttribute("style", "-webkit-filter:hue-rotate(" + setAs + ")")
}

<input type="range" data-default="0" value="0" min="0" max="360" step="1" id="hue-rotate" oninput="hueFunction(this.value)">

<br/>

<img src="https://campstoregear.com/wp-content/uploads/2017/09/summer-camp-2018-apparel-design-CD1816-Primary.png" id="lgImage">

answered Oct 3, 2017 at 20:40

Zoltan Toth

47.8k12 gold badges132 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3491000 Over a year ago

Do you know why this doesn't work with Classes instead of IDs? If I swap "getElementByID" for "getElementsByClassName" it dosn't work.

Zoltan Toth Over a year ago

getElementById returns a single element, getElementsByClassName - an array of elements. You need to specify which one you want to use, like getElementsByClassName('youClassName')[0] jsbin.com/piworezoco/edit?html,js,output

user3491000 Over a year ago

how would I apply this to all elements with that class?

Zoltan Toth Over a year ago

with a for loop, for exampe.. jsbin.com/fopibigabu/edit?js,output

user3491000 Over a year ago

Perfect. Thank you!

Collectives™ on Stack Overflow

Use Slider to Change Image CSS Filter with Javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related