Progress bar customization help

Is there a way to customize the progress bar with a gradient color starting from green and ending in red? I have attached a screenshot.

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .widget_price_filter .ui-slider .ui-slider-range {
    background-color:red;
}
body .widget_price_filter .ui-slider .ui-slider-handle:after{
    background-color:blue;
}

Please generate the gradient as per your needs and insert in the CSS. https://cssgradient.io/

Best Regards

I have tried, generated the gradient and put it, but it’s still black. The code doesn’t work.

Hello,

Please send me the gradient, perhaps this element cannot be styled with the gradient we have never tried, usually, we just changed the color.

Best Regards

this is the code:

body .widget_price_filter .ui-slider .ui-slider-range {
background-color:rgb(70,251,63);
}

body .widget_price_filter .ui-slider .ui-slider-handle:after{
background-color:radial-gradient(circle, rgba(70,251,63,1) 0%, rgba(252,70,70,1) 100%);
}

Hello,

I have checked the gradient it does not change anything perhaps it is not complete or correct, try to apply it to any block.

Best Regards

It’s not from the gradient. The problem is the code since i have tried the first code you gave me with simple colors and it’s still only black.

Hello,

Please clear the cache the code works https://gyazo.com/dabfd63f11144c9e35939cc9e156d6cb

Best Regards

Wait a minute. I don’t want to customize the price filter. The screenshot which i first provided is about the quantity stock progress bar.

Hello,

Sorry for the confusion. Please provide the page URL with the progress bar I will check.

Best Regards

I have provided it in the private section.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .woodmart-stock-progress-bar .progress-bar{
	background-color:radial-gradient(circle, rgba(70,251,63,1) 0%, rgba(252,70,70,1) 100%);
}

Now there are zero sales on this product, as soon as there are any sales the progress bar would look like this: https://prnt.sc/11921vf

Best Regards

It is still black. The code doesn’t work.

Hello,

Please check with any color without the gradient, for example, red, it works. Please check your gradient.

We have not tested gradient on this element, perhaps it does not support the gradients.

Best Regards

Nope. It doesn’t work with simple colors as well.

Hello,

You will see the color as soon as the product is sold, now there are zero sales.

Make the testing product with testing orders and test.

Best Regardss

I have tested it with sales and the progress bar is still in black. So, no, it doesn’t work.

Hello,

Please provide me the product URL with the sales.

Best Regards

The link is in the private section.

Hello,

I am afraid this element does not support the gradient, it works perfectly with color: https://gyazo.com/bed751443723a5258c4c208594ab9df6

Best Regards

[Author]

Posts