如何给不同的背景颜色滑块？ [英] how to give differnet background color to slider?

问题描述

我想根据滑块位置给出两种不同颜色的滑块颜色。一个颜色应在滑块之前，另一个颜色应在滑块之后。我使用css其他设计。这是输入[type = range]的代码。

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

而html是：

<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!

推荐答案

我注意到您要求了类似的问题，然后我看了一下，但不能真正解决你想要达到的目标。

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.

感谢Robert Biggs对他的帖子在css3wizardry上的一个解决方案构建的滑块和拇指从 < div> 标签和原型。但是因为你想要一个HTML5 < input> 解决方案，我试图做同样的元素。

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.

请查看演示。请注意，它使用 jQuery事件，但当前仅更新 background- color 在 mousedown 。它不是正确初始化，也不更新 mousemove 的颜色，但认为这将是一个很好的练习，实现自己:)演示程序在Chrome 11和Safari 5

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.

这篇关于如何给不同的背景颜色滑块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！