• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

CSS Range Control: Color thumb diff for each

Question

James Rose    38

Hello gang,

 

I need to be able to have a few Range controls, and each one needs to have it's thumb a different color.  I have just spent a good chunk of time on Codepen, etc attempting to find an answer.

 

This css works for all Range controls...  but obviously I need to have a separate class for each... what dumb@$$ thing am I missing?

 

The image shows what I am attempting to accomplish.

 

Thanks.

input[type='range']::-moz-range-thumb {
	 -moz-appearance: none;
	 border-radius: 20px;
	 background-color: #FFF;
	 box-shadow:
		inset 0 0 16px #B2B200,
		inset 16px 0 20px #FFFF33;
	 border: 2px solid #292908;
	 height: 20px;
	 width: 20px;
}

post-45653-0-04002400-1400518338.png

Share this post


Link to post
Share on other sites

11 answers to this question

Recommended Posts

  • 0
SinsOfCube    23

Just use a class to define the thumb attributes and seperate classes for the colours and give the range input elements the colourclass.

input[type='range']::-moz-range-thumb {
     -moz-appearance: none;
     border-radius: 20px;
     background-color: #FFF;
     border: 2px solid #292908;
     height: 20px;
     width: 20px;
}
input[type='range'].yellow::-moz-range-thumb {
     box-shadow:
          inset 0 0 16px #B2B200,
          inset 16px 0 20px #FFFF33;
}
input[type='range'].red::-moz-range-thumb {
     box-shadow:
          inset 0 0 16px #FF0000,
          inset 16px 0 20px #FFFF33;
}
<input type="range" class="yellow"/>
<input type="range" class="red"/>

etc.

Share this post


Link to post
Share on other sites
  • 0
winlonghorn    103

 

Hello gang,

 

I need to be able to have a few Range controls, and each one needs to have it's thumb a different color.  I have just spent a good chunk of time on Codepen, etc attempting to find an answer.

 

This css works for all Range controls...  but obviously I need to have a separate class for each... what dumb@$$ thing am I missing?

 

The image shows what I am attempting to accomplish.

 

Thanks.

input[type='range']::-moz-range-thumb {
	 -moz-appearance: none;
	 border-radius: 20px;
	 background-color: #FFF;
	 box-shadow:
		inset 0 0 16px #B2B200,
		inset 16px 0 20px #FFFF33;
	 border: 2px solid #292908;
	 height: 20px;
	 width: 20px;
}

 

try input[type=range]::-moz-slider-thumb instead of input[type=range]::-moz-range-thumb. 

Share this post


Link to post
Share on other sites
  • 0
James Rose    38

Thanks, but that won't change the fact that I need multiple classes to change the thumb color so that each Range can have their own color.  The code I gave works... but it makes all Range objects have the same color.

 

or am I missing the point you are giving?

Share this post


Link to post
Share on other sites
  • 0
winlonghorn    103

Thanks, but that won't change the fact that I need multiple classes to change the thumb color so that each Range can have their own color.  The code I gave works... but it makes all Range objects have the same color.

 

or am I missing the point you are giving?

 

No problem! I apologize. I misunderstood what you were trying to achieve. I will look a bit deeper and see if I can't find an answer for you. :)

 

EDIT: I have a quick question. Why try and avoid using multiple classes in this instance? One thing you could do if you don't want to use multiple classes is use ids instead. CSS ids are designed to be used for unique element styling (giving different elements their own unique styling). CSS classes are designed for when you want to use the same styling across multiple elements. 

Share this post


Link to post
Share on other sites
  • 0
James Rose    38

EDIT: I have a quick question. Why try and avoid using multiple classes in this instance? One thing you could do if you don't want to use multiple classes is use ids instead. CSS ids are designed to be used for unique element styling (giving different elements their own unique styling). CSS classes are designed for when you want to use the same styling across multiple elements. 

 

I'm open to all ideas, it does not have to be separate classes

Share this post


Link to post
Share on other sites
  • 0
James Rose    38

SinsofCube,

 

THANK YOU!  That is exactly what I needed.

 

Have a great day.

Share this post


Link to post
Share on other sites
  • 0
winlonghorn    103

I apologize that I wasn't able to be of more help!

Share this post


Link to post
Share on other sites
  • 0
James Rose    38

I apologize that I wasn't able to be of more help!

 

No, thank you very much for attempting.  I didn't know the answer, so thank you for taking your time.   Have a great evening

Share this post


Link to post
Share on other sites
  • 0
winlonghorn    103

No, thank you very much for attempting.  I didn't know the answer, so thank you for taking your time.   Have a great evening

 

You are very welcome! I understand how it is to search for an answer for what seems like forever and feel completely lost. Therefore, I wanted to at least try and provide an answer because nobody had been able to answer up to that point. :)

Share this post


Link to post
Share on other sites
  • 0
James Rose    38

You are very welcome! I understand how it is to search for an answer for what seems like forever and feel completely lost. Therefore, I wanted to at least try and provide an answer because nobody had been able to answer up to that point. :)

 

Indeed.  I have been a professional developer for 20 years, and there is always something we need to learn.   There is simply too much for one person to know...  so we all try to help each other.   It is one of the nice things about being in tech.

Share this post


Link to post
Share on other sites
  • 0
winlonghorn    103

Indeed.  I have been a professional developer for 20 years, and there is always something we need to learn.   There is simply too much for one person to know...  so we all try to help each other.   It is one of the nice things about being in tech.

 

I definitely cannot argue about that. :) It is nice to know that there are people there to assist if you get stuck. Thank you! 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.