cherome develop toolbarでinput rangeが動かなくなる問題
input[range]がdevtoolで動かないことが発覚した。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="height: 1px">
<input type="range" class="input-range" value="100" min="0" max="200" data-unit="%">
</body>
</html>
こういうcssを追加すれば一応動かせる
input[type=range] {
-webkit-appearance: none;
background: #5e5e5e;
height: 100%;
width: 100%;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
background: #5e5e5e;
height: 10px;
width: 10px;
border-radius: 50%;
}
動かした例
こんな感じ
全部のブラウザで挙動を統一させるときはこんな感じで
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[type=range] {
-webkit-appearance: none;
background: #5e5e5e;
height: 100%;
width: 100%;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
background: #5e5e5e;
height: 10px;
width: 10px;
border-radius: 50%;
}
input[type=range]::-ms-tooltip {
display: none;
}
input[type=range]::-moz-range-track {
height: 0;
}
input[type=range]::-moz-range-thumb {
background: #f00;
height: 10px;
width: 10px;
border: none;
border-radius: 50%;
}
</style>
</head>
<body style="height: 1px">
<input type="range" class="input-range" value="100" min="0" max="200" data-unit="%">
</body>
</html>