回答編集履歴
2
修正
test
CHANGED
|
@@ -1,12 +1,64 @@
|
|
|
1
|
+
# 修正
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
rangeのつまみはブラウザによって実装が違うため共通デザインにしないと
|
|
6
|
+
|
|
7
|
+
つまみからのオフセットは確定できません
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
1
11
|
```javascript
|
|
2
12
|
|
|
3
13
|
<style>
|
|
4
14
|
|
|
5
|
-
|
|
15
|
+
[type=range]{ -webkit-appearance: none; }
|
|
6
16
|
|
|
7
|
-
p
|
|
17
|
+
[type=range]::-webkit-slider-runnable-track{
|
|
8
18
|
|
|
9
|
-
|
|
19
|
+
height: 5px;
|
|
20
|
+
|
|
21
|
+
margin-top:8px;
|
|
22
|
+
|
|
23
|
+
background: gray;
|
|
24
|
+
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
[type="range"]::-webkit-slider-thumb{
|
|
28
|
+
|
|
29
|
+
-webkit-appearance: none;
|
|
30
|
+
|
|
31
|
+
width: 30px;
|
|
32
|
+
|
|
33
|
+
height: 30px;
|
|
34
|
+
|
|
35
|
+
margin-top: -15px;
|
|
36
|
+
|
|
37
|
+
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;
|
|
38
|
+
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
/*firefox*/
|
|
44
|
+
|
|
45
|
+
[type=range]::-moz-range-track{
|
|
46
|
+
|
|
47
|
+
height: 5px;
|
|
48
|
+
|
|
49
|
+
background: gray;
|
|
50
|
+
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
[type="range"]::-moz-range-thumb{
|
|
54
|
+
|
|
55
|
+
width: 30px;
|
|
56
|
+
|
|
57
|
+
height: 30px;
|
|
58
|
+
|
|
59
|
+
margin-top: -15px;
|
|
60
|
+
|
|
61
|
+
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;
|
|
10
62
|
|
|
11
63
|
}
|
|
12
64
|
|
|
@@ -14,15 +66,23 @@
|
|
|
14
66
|
|
|
15
67
|
background-Color:red;
|
|
16
68
|
|
|
17
|
-
height:100%;
|
|
18
|
-
|
|
19
69
|
position:absolute;
|
|
20
|
-
|
|
21
|
-
left:0px;
|
|
22
70
|
|
|
23
71
|
top:0;
|
|
24
72
|
|
|
25
73
|
pointer-events:none;
|
|
74
|
+
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
#r{
|
|
78
|
+
|
|
79
|
+
width:800px;
|
|
80
|
+
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
#wrap{
|
|
84
|
+
|
|
85
|
+
position:relative;
|
|
26
86
|
|
|
27
87
|
}
|
|
28
88
|
|
|
@@ -32,17 +92,21 @@
|
|
|
32
92
|
|
|
33
93
|
window.addEventListener('DOMContentLoaded', ()=>{
|
|
34
94
|
|
|
95
|
+
const offset=10;
|
|
96
|
+
|
|
97
|
+
const handle=30;
|
|
98
|
+
|
|
99
|
+
const w=r.offsetWidth;
|
|
100
|
+
|
|
101
|
+
const max=r.max;
|
|
102
|
+
|
|
103
|
+
aaa.style.left=offset+handle;
|
|
104
|
+
|
|
35
105
|
r.addEventListener('input',()=>{
|
|
36
|
-
|
|
37
|
-
const w=r.offsetWidth;
|
|
38
106
|
|
|
39
107
|
const p=r.value;
|
|
40
108
|
|
|
41
|
-
const max=r.max;
|
|
42
|
-
|
|
43
|
-
const offset=aaa.offsetWidth;
|
|
44
|
-
|
|
45
|
-
aaa.style.left=`${(w-
|
|
109
|
+
aaa.style.left=`${(w-handle)*p/max+offset+handle}px`;
|
|
46
110
|
|
|
47
111
|
});
|
|
48
112
|
|
1
調整
test
CHANGED
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
```javascript
|
|
2
2
|
|
|
3
3
|
<style>
|
|
4
|
+
|
|
5
|
+
#wrap{
|
|
6
|
+
|
|
7
|
+
position:relative;
|
|
8
|
+
|
|
9
|
+
width:50%;
|
|
10
|
+
|
|
11
|
+
}
|
|
4
12
|
|
|
5
13
|
#aaa{
|
|
6
14
|
|
|
@@ -42,10 +50,12 @@
|
|
|
42
50
|
|
|
43
51
|
</script>
|
|
44
52
|
|
|
45
|
-
<div
|
|
53
|
+
<div id="wrap">
|
|
46
54
|
|
|
47
55
|
<input id="r" type="range" value="0" step="1" max="100" min="0">
|
|
48
56
|
|
|
49
57
|
<span id="aaa">aaaa</span>
|
|
50
58
|
|
|
59
|
+
</div>
|
|
60
|
+
|
|
51
61
|
```
|