Menu
How to dynamically change the argument value of linear-gradient using javascript / Jquery? I have to change both color and its percentage as per user choice and the range slider value respectively. I have written the below code, but it is not working. As we have to put linear-gradient in " " and due to double quotation mark all arguments turn into simple string.
var gradColor1 = `${this.color1} ${percentage}%`;
var gradColor1 = `${this.color1} ${percentage}%`;
slider.style.background =linear-gradient(to left, gradColor1, gradColor1);
651
The issue is because you need to concatenate the values in to a string which you set as the value of style.backgroud. As you're already using template literals, try this:
slider.style.background = `linear-gradient(to left, ${gradColor1}, ${gradColor1})`
Note that if you want to specify a gradient you'll need two colours, like this:
var percentage1 = 50;
var color1 = "#C00";
var percentage2 = 100;
var color2 = "#000";
slider.style.background = `linear-gradient(to left, ${color1} ${percentage1}%, ${color2} ${percentage2}%)`;#slider {
width: 200px;
height: 200px;
}<div id="slider"></div>Finally, note that unless you're calculating colours dynamically in JS, it would be a much better idea to set the background using CSS only, like this:
#slider {
width: 200px;
height: 200px;
background: linear-gradient(to left, #C00 50%, #000 100%);
}<div id="slider"></div>Here is my snippet using javascript where you can select OriginalColor and does darkening or lightening shadow of the same color (in case original color comes from json for example). By modifying codepen below you can add logic to change percentage where fading starts, lightening or darkening, original color and auto calculated second color (in case you would like to make it totally dynamic and programmatic). Its little bit more than you asked for but I hope someone finds it useful as it came to me as request during my project.
codepen: Dynamic linear color depending on original color
<!DOCTYPE html>
<html>
<head>
<title>Dynamic linear color depending on original color</title>
</head>
<body>
<h1>Linear Gradient - Left to Right </h1>
<p>This linear gradient starts ModifiedColor at the left, transitioning to OriginalColor at the Right in 55% proportion:</p>
</body>
</html>
JS:
function ModColor(color, adjustBy) {
return '#' + color.replace(/^#/, '').replace(/../g, color => ('0'+Math.min(255, Math.max(0, parseInt(color, 16) + adjustBy)).toString(16)).substr(-2));
}
var OriginalColor="#ad112b";
//this is fade itno color and ModifiedColor is starting color but it can be reverted in calculation below
var ModifiedColor=ModColor(OriginalColor,-40);
//replace -40 to 40 to switch darken to lighten or change value -80 to get more shadow etc...
document.body.style.backgroundImage = 'linear-gradient(to right,'+ModifiedColor+' 55%,'+OriginalColor+')';
//55% is where is going to start fading into OriginalColor so left side is ModifiedColor but can be reverted if needed differently
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
