How to change the round slider icon to a different image

Hi Gene,

Styling range inputs is notoriously difficult to make them consistent cross-browser.

Each browser uses its own class for applying styles to the 'Thumb' of a range element and you should apply specific styles for each one to make sure it looks consistent.

There's a good article that explains it here: http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html

As an example for Google Chrome you could go for something like this:

.frm_style_formidable-style.with_frm_style input[type=range]::-webkit-slider-thumb {
border: 1px solid rgba(224,60,131,.6);
color: #fff;
background-color: #e03c83;
background-image: url(/wp-content/uploads/2017/12/Vector-Smart-Object@03x-1.png);
background-size: 70%;
background-position: 50% 50%;
background-repeat: no-repeat;
}

.with_frm_style input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
-webkit-border-radius: 20px;
height: 3em;
width: 3em;
border-radius: 10px;
border: 1px solid rgba(0,142,194,.6);
color: #fff;
background-color: #008ec2;
cursor: pointer;
margin-top: -1.5em;
}

Hope that helps

Chris | FDM Digital

I forgot to mention that the example CSS above uses a background image on the existing element but you could style it differently of course.

Thanks

Chris

Hi Gene,

I put a small demo together here:

https://www.fdmdigital.co.uk/formidable-forms-tabbed-slider/

Click on the 'Next' button in the form and slider is on the 2nd page.

The CSS for the demo is:

/* Slider CSS */

.with_frm_style input[type=range]::-webkit-slider-thumb {
height: 2.5em;
width: 4.2em;
border-radius: 0;
margin-top: -1.3em;
}
 

Thanks

Chris | FDM Digital

Thanks Chris, for some reason this CSS isn't pulling in my selected background image.  Any ideas? You can see the form on the home page of the domain shown in image link. I've tried little adjustments, colors, embedding on different pages, etc. I included the CSS in the custom CSS section of my theme "Jupiter".

* Slider CSS */
.frm_style_formidable-style.with_frm_style input[type=range]::-webkit-slider-thumb {
background-color: transparent;
background-image: url("https://www.holistic.vip/wp-content/uploads/2019/03/clients.png");
background-repeat: no-repeat;
background-position: 50% 50%;
}

.with_frm_style input[type=range]::-webkit-slider-thumb {
height: 2.5em;
width: 2.5em;
border-radius: 0;
margin-top: -1.2em;
}

Hi Gene,

You've missed the first / from the /* Slider CSS */ comment but that can be removed to save any confusion.

Try this instead:

.frm_style_footer-style.with_frm_style input[type=range]::-webkit-slider-thumb {
border: none !important;
color: #ffffff !important;
background-color: #ffffff !important;
background-image: url(https://www.holistic.vip/wp-content/uploads/2019/03/clients.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}

You may need to play around with the CSS to make sure that it's not being over-ridden by your theme or the Formidable styles that you have selected in your settings.

Thanks

Chris

Sorry for the delay responding.  I wanted to thank you.  Your CSS worked perfectly!  I greatly appreciate your help with this! :)

Hi Gene,

No problem at all. Glad it's all working well for you :)

Best regards

Chris | FDM Digital

Hi Gene,

One other thing, you should add the additional classes for Firefox and IE / Edge to make sure that it looks consistent across all browsers.

For example:

.frm_style_footer-style.with_frm_style input[type=range]::-webkit-slider-thumb,
.frm_style_footer-style.with_frm_style input[type=range]::-moz-range-thumb,
.frm_style_footer-style.with_frm_style input[type=range]::-ms-thumb {
border: none !important;
color: #ffffff !important;
background-color: #ffffff !important;
background-image: url(https://www.holistic.vip/wp-content/uploads/2019/03/clients.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}

Thanks

Chris

Hi Chris,

Anyway you could provide the additional CSS I would need to make this work on IE and possibly FireFox?

Hi Gene,

The CSS i gave you has the selectors for Firefox, Chrome / Safari and IE / Edge already. The Pseudo classes ::-moz-range-thumb and ::-ms-thumb and ::-webkit-slider-thumb should apply to each browser.

The CSS below should target Firefox specifically and works in the inspector so you may need to specify the 3 rules individually:

Firefox:

.frm_style_footer-style.with_frm_style input[type="range"]::-moz-range-thumb {
color: #ffffff !important;
border: none !important;
background-color: #ffffff !important;
background-image: url(https://www.holistic.vip/wp-content/uploads/2019/03/clients.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}

Chrome / Safari:

.frm_style_footer-style.with_frm_style input[type="range"]::-webkit-slider-thumb {
color: #ffffff !important;
border: none !important;
background-color: #ffffff !important;
background-image: url(https://www.holistic.vip/wp-content/uploads/2019/03/clients.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}

IE and Edge:

.frm_style_footer-style.with_frm_style input[type="range"]::-ms-thumb {
color: #ffffff !important;
border: none !important;
background-color: #ffffff !important;
background-image: url(https://www.holistic.vip/wp-content/uploads/2019/03/clients.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}

As i mentioned in the first reply though, targeting and styling slider pseudo classes can be troublesome and the official advice from Mozilla is as follows:

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-range-thumb

Thanks

Chris

Also, just FYI, this community forum is being taken down soon and the community has moved over to a new Formidable Slack channel here: https://formidablecommunity.slack.com/

I would recommend signing up and joining the group where you can reach out to the community for help on anything in the future.

Thanks

Chris