回答編集履歴
2
修正
answer
CHANGED
|
@@ -1,26 +1,58 @@
|
|
|
1
|
+
# 修正
|
|
2
|
+
|
|
3
|
+
rangeのつまみはブラウザによって実装が違うため共通デザインにしないと
|
|
4
|
+
つまみからのオフセットは確定できません
|
|
5
|
+
|
|
1
6
|
```javascript
|
|
2
7
|
<style>
|
|
3
|
-
#wrap{
|
|
4
|
-
|
|
8
|
+
[type=range]{ -webkit-appearance: none; }
|
|
9
|
+
[type=range]::-webkit-slider-runnable-track{
|
|
5
|
-
|
|
10
|
+
height: 5px;
|
|
11
|
+
margin-top:8px;
|
|
12
|
+
background: gray;
|
|
6
13
|
}
|
|
14
|
+
[type="range"]::-webkit-slider-thumb{
|
|
15
|
+
-webkit-appearance: none;
|
|
16
|
+
width: 30px;
|
|
17
|
+
height: 30px;
|
|
18
|
+
margin-top: -15px;
|
|
19
|
+
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30"><circle cx="15" cy="15" r="15" fill="lime" /><text x="8" y="20" fill="black" >丸</text></svg>') no-repeat 0 0;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/*firefox*/
|
|
23
|
+
[type=range]::-moz-range-track{
|
|
24
|
+
height: 5px;
|
|
25
|
+
background: gray;
|
|
26
|
+
}
|
|
27
|
+
[type="range"]::-moz-range-thumb{
|
|
28
|
+
width: 30px;
|
|
29
|
+
height: 30px;
|
|
30
|
+
margin-top: -15px;
|
|
31
|
+
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30"><circle cx="15" cy="15" r="15" fill="lime" /><text x="8" y="20" fill="black" >丸</text></svg>') no-repeat 0 0;
|
|
32
|
+
}
|
|
7
33
|
#aaa{
|
|
8
34
|
background-Color:red;
|
|
9
|
-
height:100%;
|
|
10
35
|
position:absolute;
|
|
11
|
-
left:0px;
|
|
12
36
|
top:0;
|
|
13
37
|
pointer-events:none;
|
|
14
38
|
}
|
|
39
|
+
#r{
|
|
40
|
+
width:800px;
|
|
41
|
+
}
|
|
42
|
+
#wrap{
|
|
43
|
+
position:relative;
|
|
44
|
+
}
|
|
15
45
|
</style>
|
|
16
46
|
<script>
|
|
17
47
|
window.addEventListener('DOMContentLoaded', ()=>{
|
|
48
|
+
const offset=10;
|
|
49
|
+
const handle=30;
|
|
50
|
+
const w=r.offsetWidth;
|
|
51
|
+
const max=r.max;
|
|
52
|
+
aaa.style.left=offset+handle;
|
|
18
53
|
r.addEventListener('input',()=>{
|
|
19
|
-
const w=r.offsetWidth;
|
|
20
54
|
const p=r.value;
|
|
21
|
-
const max=r.max;
|
|
22
|
-
const offset=aaa.offsetWidth;
|
|
23
|
-
aaa.style.left=`${(w-
|
|
55
|
+
aaa.style.left=`${(w-handle)*p/max+offset+handle}px`;
|
|
24
56
|
});
|
|
25
57
|
});
|
|
26
58
|
</script>
|
1
調整
answer
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
```javascript
|
|
2
2
|
<style>
|
|
3
|
+
#wrap{
|
|
4
|
+
position:relative;
|
|
5
|
+
width:50%;
|
|
6
|
+
}
|
|
3
7
|
#aaa{
|
|
4
8
|
background-Color:red;
|
|
5
9
|
height:100%;
|
|
@@ -20,7 +24,8 @@
|
|
|
20
24
|
});
|
|
21
25
|
});
|
|
22
26
|
</script>
|
|
23
|
-
<div
|
|
27
|
+
<div id="wrap">
|
|
24
28
|
<input id="r" type="range" value="0" step="1" max="100" min="0">
|
|
25
29
|
<span id="aaa">aaaa</span>
|
|
30
|
+
</div>
|
|
26
31
|
```
|