-
Notifications
You must be signed in to change notification settings - Fork 0
/
slidersvg.html
109 lines (93 loc) · 5.44 KB
/
slidersvg.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
<head>
<style>
input.supra-rainbow {
-webkit-appearance: none;
background-image: linear-gradient(to right, #ff0000, #ff9900, #ffff00, #6aa84f, #0000ff, #9900ff, #674ea7);
height: 32px;
width: 400px;
}
input.supra-greyscale {
-webkit-appearance: none;
background-image: linear-gradient(to right, #ffffff, #000000);
height: 32px;
width: 400px;
}
::-webkit-slider-thumb {
-webkit-appearance: none;
width:30px;
height: 30px;
background: rgba(99, 16, 99, 0.61);
}
.heart {
display:inline-block;
width: 32px;
height: 32px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 1 1'><path fill='red' stroke-width='0.05' d='M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z'/></svg>");
}
.vader {
display:inline-block;
width: 32px;
height: 32px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 20 20'><path fill='red' stroke-width='0.05' d='M16.853,8.355V5.888c0-3.015-2.467-5.482-5.482-5.482H8.629c-3.015,0-5.482,2.467-5.482,5.482v2.467l-2.741,7.127c0,1.371,4.295,4.112,9.594,4.112s9.594-2.741,9.594-4.112L16.853,8.355z M5.888,17.367c-0.284,0-0.514-0.23-0.514-0.514c0-0.284,0.23-0.514,0.514-0.514c0.284,0,0.514,0.23,0.514,0.514C6.402,17.137,6.173,17.367,5.888,17.367z M5.203,10c0-0.377,0.19-0.928,0.423-1.225c0,0,0.651-0.831,1.976-0.831c0.672,0,1.141,0.309,1.141,0.309C9.057,8.46,9.315,8.938,9.315,9.315v1.028c0,0.188-0.308,0.343-0.685,0.343H5.888C5.511,10.685,5.203,10.377,5.203,10z M7.944,16.853H7.259v-1.371l0.685-0.685V16.853z M9.657,16.853H8.629v-2.741h1.028V16.853zM8.972,13.426v-1.028c0-0.568,0.46-1.028,1.028-1.028c0.568,0,1.028,0.46,1.028,1.028v1.028H8.972z M11.371,16.853h-1.028v-2.741h1.028V16.853z M12.741,16.853h-0.685v-2.056l0.685,0.685V16.853z M14.112,17.367c-0.284,0-0.514-0.23-0.514-0.514c0-0.284,0.23-0.514,0.514-0.514c0.284,0,0.514,0.23,0.514,0.514C14.626,17.137,14.396,17.367,14.112,17.367z M14.112,10.685h-2.741c-0.377,0-0.685-0.154-0.685-0.343V9.315c0-0.377,0.258-0.855,0.572-1.062c0,0,0.469-0.309,1.141-0.309c1.325,0,1.976,0.831,1.976,0.831c0.232,0.297,0.423,0.848,0.423,1.225S14.489,10.685,14.112,10.685z M18.347,15.801c-0.041,0.016-0.083,0.023-0.124,0.023c-0.137,0-0.267-0.083-0.319-0.218l-2.492-6.401c-0.659-1.647-1.474-2.289-2.905-2.289c-0.95,0-1.746,0.589-1.754,0.595c-0.422,0.317-1.084,0.316-1.507,0C9.239,7.505,8.435,6.916,7.492,6.916c-1.431,0-2.246,0.642-2.906,2.292l-2.491,6.398c-0.069,0.176-0.268,0.264-0.443,0.195c-0.176-0.068-0.264-0.267-0.195-0.444l2.492-6.401c0.765-1.911,1.824-2.726,3.543-2.726c1.176,0,2.125,0.702,2.165,0.731c0.179,0.135,0.506,0.135,0.685,0c0.04-0.029,0.99-0.731,2.165-0.731c1.719,0,2.779,0.814,3.542,2.723l2.493,6.404C18.611,15.534,18.524,15.733,18.347,15.801z'/></svg>");
}
.circle::-webkit-slider-thumb {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 1 1'><path fill='red' stroke='white' stroke-width='0.01' d='M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z'/></svg>");
/*
clip-path: circle(50% at 50% 50%);
*/
}
.triangle::-webkit-slider-thumb {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.square::-webkit-slider-thumb {
clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
}
.pentagon::-webkit-slider-thumb {
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.hexagon::-webkit-slider-thumb {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.heptagon::-webkit-slider-thumb {
clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}
.octagon::-webkit-slider-thumb {
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
p{
margin: 1px;
padding: 1px;
}
</style>
</head>
<body>
<header>
<h1 style="text-align: center;">SupraSliders</h1>
</header>
<div style="text-align: center;">
<p>
<span><div class="vader"></div><input type="range" min="-50" max="50" value="0" class="supra-rainbow circle" /><div class="heart"></div></span>
</p>
<p>
<input type="range" min="-50" max="50" value="0" class="supra-greyscale triangle" />
</p>
<p>
<input type="range" min="-50" max="50" value="0" class="supra-greyscale square" />
</p>
<p>
<input type="range" min="-50" max="50" value="0" class="supra-greyscale pentagon" />
</p>
<p>
<input type="range" min="-50" max="50" value="0" class="supra-greyscale hexagon" />
</p>
<p>
<input type="range" min="-50" max="50" value="0" class="supra-greyscale heptagon" />
</p>
<p>
<input type="range" min="-50" max="50" value="0" class="supra-greyscale octagon" />
</p>
</div>
</body>
</html>