Knowledge Base - How can I change the color of the slider "thumb"?

The default blue slider 'thumb' can be changed by adding code to the KJESiteSpecific.css. Our new sliders need to support four different browser types that all use slightly different coding.

Below is an example of the code you need to make the sliders show up as a nice red. Use this same code but replace 212,0,0 with the RGB color you wish to use.

/* Colors for Slider Thumb - Changes in three places: */ 

/* Web-Kit Browsers*/ 
.KJEInputContainer input[type=range]::-webkit-slider-thumb { 
border-bottom: 12px solid rgba(212,0,0, 0.6); 
-webkit-box-shadow: 0 2px rgba(212,0, 0, 0.3); 
} 

.KJEInputContainer input[type=range]:active::-webkit-slider-thumb { 
border-bottom: 12px solid rgba(212,0,0, 1); 
-webkit-box-shadow: 0 2px rgba(212,0,0, 0.6); 
box-shadow: 0 2px rgba(212,0,0, 0.6); 
} 

/* Modzilla Browsers*/ 
.KJEInputContainer input[type=range]::-moz-range-thumb { 
border-bottom: 12px solid rgba(212,0,0, 0.6); 
-moz-box-shadow: 0 2px rgba(212,0,0, 0.3); 
box-shadow: 0 2px rgba(212,0,0, 0.3); 
} 

.KJEInputContainer input[type=range]:active::-moz-range-thumb { 
border-bottom: 12px solid rgba(212,0,0, 1); 
-mox-box-shadow: 0 2px rgba(212,0,0, 0.6); 
box-shadow: 0 2px rgba(212,0,0, 0.6); 
} 

/* Microsoft Browsers*/ 
.KJEInputContainer input[type=range]::-ms-thumb { 
border-bottom: 12px solid rgba(212,0,0, 0.6); 
box-shadow: 0 2px 0 rgba(212,0,0, 0.3); 
} 

.KJEInputContainer input[type=range]:active::-ms-thumb { 
border-bottom: 12px solid rgba(212,0,0, 1); 
-webkit-box-shadow: 0 2px rgba(212,0,0, 0.6); 
box-shadow: 0 2px rgba(212,0,0, 0.6); 
} 

/* Browsers that don't support type='range' */ 
.KJEInputContainer .KJEArrowIE8 { 
border-bottom: 12px solid rgb(212,0,0); 
} 

.KJEInputContainer .KJEArrow { 
border-bottom: 12px solid rgba(212,0,0, 0.6); 
box-shadow: 0 2px 0 rgba(212,0,0, 0.3); 
-webkit-box-shadow: 0 2px rgba(212,0,0, 0.3); 
-moz-box-shadow: 0 2px rgba(212,0,0, 0.3); 
} 

.KJEInputContainer .KJEArrow.active { 
border-bottom: 12px solid rgba(212,0,0, 0.5); 
}