我必须实现这一目标: Range Slider
我已经完成了范围滑块的部分,但是在更改范围滑块上的标记时遇到了问题。甚至我也提供了图像src:“ https://png.icons8.com/metro/52/000000/sort-down.png”。
我将自己的工作添加到完成的地方。
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
.slidecontainer {
width: 100%;
}
.slider {
width: 30%;
height: 10px;
border-radius: 5px;
background-image: linear-gradient(to right, rgba(255, 0, 0, 1), rgba(0, 128, 0, 1));
outline: none;
opacity: 0.7;
transition: opacity .2s;
-webkit-appearance: none;
}
.slider:hover {
background-image: linear-gradient(to right, rgba(255, 0, 0, 1), rgba(0, 128, 0, 1));
}
.slider::-webkit-slider-thumb {
width: 23px;
height: 24px;
border: 0;
background: url('contrasticon.png');
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 23px;
height: 24px;
border: 0;
background: url('contrasticon.png');
cursor: pointer;
}
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
答案 0 :(得分:1)
您需要使用滑块上的appearance: none;
才能使用自定义图像。
看看:
.slidecontainer {
width: 100%;
}
.slider {
width: 30%;
height: 10px;
border-radius: 5px;
background-image: linear-gradient(to right, rgba(255, 0, 0, 1), rgba(0, 128, 0, 1));
outline: none;
opacity: 0.7;
transition: opacity .2s;
-webkit-appearance: none;
}
.slider:hover {
background-image: linear-gradient(to right, rgba(255, 0, 0, 1), rgba(0, 128, 0, 1));
}
.slider::-webkit-slider-thumb {
width: 23px;
height: 24px;
border: 0;
background: url('https://png.icons8.com/metro/52/000000/sort-down.png');
background-size: 16px;
background-repeat: no-repeat;
background-position: 0 -4px;
cursor: pointer;
-webkit-appearance: none;
}
.slider::-moz-range-thumb {
width: 23px;
height: 24px;
border: 0;
background: url('https://png.icons8.com/metro/52/000000/sort-down.png');
background-size: 16px;
background-repeat: no-repeat;
background-position: 0 -4px;
cursor: pointer;
-moz-appearance: none;
}
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
现在可以随意更改图像属性,例如大小,旋转度,z-index
答案 1 :(得分:1)
您可以尝试使用纯CSS解决方案,无需图像即可轻松控制箭头(大小,颜色,位置):
.slider {
margin:50px;
width: 30%;
height: 10px;
border-radius: 5px;
background-image: linear-gradient(to right, rgba(255, 0, 0, 1), rgba(0, 128, 0, 1));
outline: none;
opacity: 0.7;
transition: opacity .2s;
-webkit-appearance: none;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 40px;
background:
linear-gradient(to bottom left,#000 49%,transparent 50%) top left/50% 15px,
linear-gradient(to bottom right,#000 49%,transparent 50%) top right/50% 15px;
background-repeat:no-repeat;
display:inline-block;
}
.slider::-moz-range-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 40px;
background:
linear-gradient(to bottom left,#000 49%,transparent 50%) top left/50% 15px,
linear-gradient(to bottom right,#000 49%,transparent 50%) top right/50% 15px;
background-repeat:no-repeat;
display:inline-block;
}
<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>