Я попытался установить свойство height внутри класса: «slider :: - ms-thumb» для увеличения высоты большого пальца (объект, который мы перетаскиваем), но, похоже, что только в Inte rnet explorer высота игнорируется, а перетаскиваемая ручка получает ту же высоту стержня. При открытии в FireFox или Chrome он работает хорошо.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style type="text/css">
.slider {
-webkit-appearance: none;
width: 75px;
height: 15px;
background: #AFCEE0;
outline: none;
position: absolute;
top: 10px;
left: 10px;
margin:0px;
padding:0px;
direction: ltr;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 10px;
height: 25px;
background: #ED1C24;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 10px;
height: 25px;
background: #ED1C24;
cursor: pointer;
}
/* Inter Explorer Adjustments */
.slider::-ms-fill-lower {
background: #AFCEE0;
}
.slider::-ms-fill-upper {
background: #AFCEE0;
}
.slider::-ms-thumb { /* This is the "handle" we are dragging */
width: 15px;
height: 45px;
border:0;
background: #ED1C24;
}
.slider::-ms-tooltip {
background: #ED1C24;
}
.slider::-ms-track {
color: transparent;
border:0;
}
.slider::-ms-track-before {
color: transparent;
border:0;
}
.slider::-ms-track-after {
color: transparent;
border:0;
}
</style>
</head>
<body>
<input type="range" min="10" max="175" value="50" class="slider" id="myRange">
</body>
</html>