javascript - 滑动范围滑块 - Thinbug

滑动范围滑块

时间：2015-12-27 19:45:49

标签： javascript jquery html css

    function myValue(val) {
    document.getElementById('inputVal').innerHTML=val; 
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  background: red;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #e7ffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

<html>
<head>

</head>
<body>
<div>
<input type = "range" min = "10" max = "100" step = "1" onchange="myValue(this.value);" oninput="myValue(this.value)">
<div id = "inputVal"></div>
</div>
<body>
</html>

我使用html的简单输入范围。我可以修改轨道和拇指但是我想要在向前方向上移动拇指上填充轨道的颜色，并在移动背面上移除颜色。我怎么能这样做？

2 个答案:

答案 0 :(得分：0)

据我所知，您只能在Internet Explorer中执行此操作：

input[type="range"]::-ms-fill-lower {
  background: blue;
}
input[type="range"]::-ms-fill-upper {
  background: red;
}

<input type="range" min="10" max="100" step="1">

答案 1 :(得分：0)

您可以使用JQuery Slider获得相同的结果。

CSS：

#red {
float: left;
clear: left;
width: 300px;
margin: 15px;
  }
#red .ui-slider-range { background: #ef2929; }

HTML：

<body >
   <div id="red"></div>
   <div id="va"></div>
 </body>

JS JQUERY：

function getval()
{
document.getElementById("va").innerHTML = $( "#red" ).slider( "option",     "value" );
 }

$(function() {
$( "#red").slider({
  orientation: "horizontal",
  range: "min",
  max: 100,
  value: 10,
  slide : getval 
});
});

JSFiddle：https://jsfiddle.net/6h49upte/

另请参阅JQuery Slider API及其易于实现的示例。查看支持的Jquery版本。