how to give differnet background color to slider?

Question

I want to give the color for slider with two different colors based upon the slider position. one color should be before the slider and another color should be after the slider. I achived other designs using css. Here is the code that skins the input[type=range].

input[type=range]{
   border: 1px solid #4ba8b1;
margin: 0px 0px 5px 5px;
background:-webkit-gradient(linear,center top, center bottom, from(#CFDCDD),to(#DFE9EA),color-stop(50%,#DFE9EA));
float:left;
pointer:cursor;
-webkit-appearance:none;
width:300px;
height:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
input[type=range]::-webkit-slider-thumb
{
  -webkit-appearance:none;
   border:1px solid #4ba8b1;
   background:-webkit-gradient(linear,center top, center bottom,from(#CAE8E9),to(#E4ECEC),color-stop(50%,#9ED2D1));
   background:-moz-linear-gradient(top,#CAE8E9,#9ED2D1,#E4ECEC);
   width:7px;
   height:15px;
   opacity:.7;
}

And the html is :

<input type="range"  name="rangeEl" value="120" min="0" max="150"  />

It renders the output well with single background color. Now I need to give color for slider which is before the thumb and another color which is after the thumb. help me!

This is too hazy in its current state. Can you re-word a bit to make clearer what you want and what exactly your question is? A slider control is however not doable in pure CSS — Pekka, Mar 03 '11 at 08:55

score 1 · Answer 1 · edited May 23 '17 at 11:59

I noticed you asked a similar question yesterday and I looked at it then but couldn't really work out what you wanted to achieve. I have had some more time to think about it and do some research and have a solution.

Credit to Robert Biggs on his post on css3wizardry for a solution building the slider and thumb from <div> tags and prototype. But since you wanted an HTML5 <input> solution I have attempted to do the same with that element.

Please have a look at the demo. Note that it uses jQuery events, but currently only updates the background-color on the mousedown. It is not initialized correctly and also does not update the colour on mousemove but thought it would be a good exercise to implement that yourself :) The demo works on Chrome 11 and Safari 5.

Please also read this comment and the comments on your previous question about the drawbacks of styling form elements.

how to give differnet background color to slider?

1 Answers1

Linked