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.

Answer 1

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.