CSS Range Control: Color thumb diff for each

[James Rose]

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;
}

[SinsOfCube]

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.

[winlonghorn]

 

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. 

[James Rose]

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?

[winlonghorn]

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. 

[James Rose]

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

[James Rose]

SinsofCube,

 

THANK YOU!  That is exactly what I needed.

 

Have a great day.

[winlonghorn]

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

[James Rose]

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

[winlonghorn]

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. :)

[James Rose]

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.

[winlonghorn]

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!