SIGN UP

How to color only the "filled" section of the number slider like in the image in the features page

By: Fidan Jovanov | Asked: 12/26/2022
Forums › Category: How-to › How to color only the "filled" section of the number slider like in the image in the features page
0 Vote Up Vote Down
Fidan Jovanov asked 2 years ago
I want to achieve the same look for the slider as in this image from the features page but I don't see any options for it. I can only style the color of the slider in the Forms Styler but it colors the entire slider range, not only the selected range. WordPress Financial calculator plugin demo
5 Answers
0 Vote Up Vote Down
Victor Font answered 2 years ago
If you use your browser's inspection tool, you'll see this CSS listed under pseudo elements: .frm_style_formidable-style.with_frm_style input[type="range"]::-moz-range-progress { background-color: #008ec2; } Copy this to your custom CSS and change the background-color.
Fidan Jovanov replied 2 years ago

It seems like I don't have this pseudo element, so this code does nothing. I am unable to find the pseudo element on my own as well.

0 Vote Up Vote Down
Fidan Jovanov answered 2 years ago

Attached is the element code and style for it. 

Attachments
1.jpg
2.jpg
Victor Font replied 2 years ago

It's impossible for the pseudo element not to exist. The CSS I gave you came directly from the Formidable style sheet and creates the blue color you see in your first set of images. Since you can clearly see the blue color in your images. The pseudo element exists. I tested this code by changing the color to red and green. Results are pictured below.

0 Vote Up Vote Down
Victor Font answered 2 years ago

Images of CSS working in FireFox

Attachments
pseudo-css-green.png
pseudo-css-red.png
0 Vote Up Vote Down
Fidan Jovanov answered 2 years ago
Hmm I saw you're using firefox and the pseudo element kind of hints at that, so I checked and it does work with firefox, but not in chrome
Victor Font replied 2 years ago

That's interesting. I always use Firefox for development and test in Safari, Chrome, and Edge for release testing. I've noticed other differences in web browsers before. There was an Ajax function I wrote onetime that accessed a response that worked great in FireFox, Chrome, and Edge, but failed every single time with the identical data set in Safari. As I drilled down, I found that Safari was missing a key value in whatever API I was tapping into to diagnose the JSON. I ended up creating a workaround that worked even in Safari.

I checked the field in Chrome and Safari and there is no background color in either browser. However, examining the HTML Source code in Safari may have included a helpful hint that could possibly work in Chrome as well. I'll attach another screen print, this time to show the hint in Safari.

Fidan Jovanov replied 2 years ago

Thank you I really appreciate you looking into this.

0 Vote Up Vote Down
Victor Font answered 2 years ago
The screen print attached to this answer shows a Safari hint that there are 3-pseudo elements available in the browser. I've never tested them and don't know exactly how they work or what they control. You'll need to experiment. To see how to these work, take the original code snippet above and change the part that says -moz-range-progress and replace with -webkit-slider-container, -webkit-slider-runnable-track, and -webkit-slider-thumb. I would make three snippets, each of a different color to distinguish them and see what happens. You can insert the snippets into the Before Fields area on the Customize HTML screen. Don't forgot to use the tags.
Attachments
safari-hint.png
Fidan Jovanov replied 2 years ago

I'm finally able to see the same pseudo elements you see on Safari by turning on Shadow DOM in the Inspect Element settings. The target is -webkit-slider-runnable-track but that just colors the entire track of the slider.

I'll just leave this for now, it seems like way too much time for something cosmetic.

Thanks for taking the time to look into this!

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right