Skip to content

Commit 19941c4

Browse files
simeydotmesimeydotme
committed
dist folder needs to exist for importing (non-sveltekit)
1 parent 9c9d235 commit 19941c4

15 files changed

+10256
-1
lines changed

‎.gitignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
.astro
33
node_modules
44
/build
5-
/dist
65
/docs
76
/tests/**/build
87
/tests/**/dist

‎dist/range-slider-pips.css‎

Lines changed: 368 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,368 @@
1+
/*
2+
* RangeSlider
3+
*/
4+
5+
.rangeSlider {
6+
--slider: var(--range-slider, #d7dada);
7+
--handle-inactive: var(--range-handle-inactive, #99a2a2);
8+
--handle: var(--range-handle, #838de7);
9+
--handle-focus: var(--range-handle-focus, #4a40d4);
10+
--handle-border: var(--range-handle-border, var(--handle));
11+
--range-inactive: var(--range-range-inactive, var(--handle-inactive));
12+
--range: var(--range-range, var(--handle-focus));
13+
--float-inactive: var(--range-float-inactive, var(--handle-inactive));
14+
--float: var(--range-float, var(--handle-focus));
15+
--float-text: var(--range-float-text, white);
16+
}
17+
18+
.rangeSlider {
19+
position: relative;
20+
border-radius: 100px;
21+
height: 0.5em;
22+
margin: 1em;
23+
transition: opacity 0.2s ease;
24+
user-select: none;
25+
}
26+
27+
.rangeSlider * {
28+
user-select: none;
29+
}
30+
31+
.rangeSlider.pips {
32+
margin-bottom: 1.8em;
33+
}
34+
35+
.rangeSlider.pip-labels {
36+
margin-bottom: 2.8em;
37+
}
38+
39+
.rangeSlider.vertical {
40+
display: inline-block;
41+
border-radius: 100px;
42+
width: 0.5em;
43+
min-height: 200px;
44+
}
45+
46+
.rangeSlider.vertical.pips {
47+
margin-right: 1.8em;
48+
margin-bottom: 1em;
49+
}
50+
51+
.rangeSlider.vertical.pip-labels {
52+
margin-right: 2.8em;
53+
margin-bottom: 1em;
54+
}
55+
56+
.rangeSlider .rangeHandle {
57+
position: absolute;
58+
display: block;
59+
height: 1.4em;
60+
width: 1.4em;
61+
top: 0.25em;
62+
bottom: auto;
63+
transform: translateY(-50%) translateX(-50%);
64+
z-index: 2;
65+
}
66+
67+
.rangeSlider.reversed .rangeHandle {
68+
transform: translateY(-50%) translateX(50%);
69+
}
70+
71+
.rangeSlider.vertical .rangeHandle {
72+
left: 0.25em;
73+
top: auto;
74+
transform: translateY(50%) translateX(-50%);
75+
}
76+
77+
.rangeSlider.vertical.reversed .rangeHandle {
78+
transform: translateY(-50%) translateX(-50%);
79+
}
80+
81+
.rangeSlider .rangeNub,
82+
.rangeSlider .rangeHandle:before {
83+
position: absolute;
84+
left: 0;
85+
top: 0;
86+
display: block;
87+
border-radius: 10em;
88+
height: 100%;
89+
width: 100%;
90+
transition: box-shadow 0.2s ease;
91+
}
92+
93+
.rangeSlider .rangeHandle:before {
94+
content: "";
95+
left: 1px;
96+
top: 1px;
97+
bottom: 1px;
98+
right: 1px;
99+
height: auto;
100+
width: auto;
101+
box-shadow: 0 0 0 0px var(--handle-border);
102+
opacity: 0;
103+
}
104+
105+
.rangeSlider.hoverable:not(.disabled) .rangeHandle:hover:before {
106+
box-shadow: 0 0 0 8px var(--handle-border);
107+
opacity: 0.2;
108+
}
109+
110+
.rangeSlider.hoverable:not(.disabled) .rangeHandle.press:before,
111+
.rangeSlider.hoverable:not(.disabled) .rangeHandle.press:hover:before {
112+
box-shadow: 0 0 0 12px var(--handle-border);
113+
opacity: 0.4;
114+
}
115+
116+
.rangeSlider.range:not(.min):not(.max) .rangeNub {
117+
border-radius: 10em 10em 10em 1.6em;
118+
}
119+
120+
.rangeSlider.range .rangeHandle:nth-of-type(1) .rangeNub {
121+
transform: rotate(-135deg);
122+
}
123+
124+
.rangeSlider.range .rangeHandle:nth-of-type(2) .rangeNub {
125+
transform: rotate(45deg);
126+
}
127+
128+
.rangeSlider.range.reversed .rangeHandle:nth-of-type(1) .rangeNub {
129+
transform: rotate(45deg);
130+
}
131+
132+
.rangeSlider.range.reversed .rangeHandle:nth-of-type(2) .rangeNub {
133+
transform: rotate(-135deg);
134+
}
135+
136+
.rangeSlider.range.vertical .rangeHandle:nth-of-type(1) .rangeNub {
137+
transform: rotate(135deg);
138+
}
139+
140+
.rangeSlider.range.vertical .rangeHandle:nth-of-type(2) .rangeNub {
141+
transform: rotate(-45deg);
142+
}
143+
144+
.rangeSlider.range.vertical.reversed .rangeHandle:nth-of-type(1) .rangeNub {
145+
transform: rotate(-45deg);
146+
}
147+
148+
.rangeSlider.range.vertical.reversed .rangeHandle:nth-of-type(2) .rangeNub {
149+
transform: rotate(135deg);
150+
}
151+
152+
.rangeSlider .rangeFloat {
153+
display: block;
154+
position: absolute;
155+
left: 50%;
156+
top: -0.5em;
157+
transform: translate(-50%, -100%);
158+
font-size: 1em;
159+
text-align: center;
160+
opacity: 0;
161+
pointer-events: none;
162+
white-space: nowrap;
163+
transition: all 0.2s ease;
164+
font-size: 0.9em;
165+
padding: 0.2em 0.4em;
166+
border-radius: 0.2em;
167+
}
168+
169+
.rangeSlider .rangeHandle.active .rangeFloat,
170+
.rangeSlider.hoverable .rangeHandle:hover .rangeFloat {
171+
opacity: 1;
172+
top: -0.2em;
173+
transform: translate(-50%, -100%);
174+
}
175+
176+
.rangeSlider .rangeBar {
177+
position: absolute;
178+
display: block;
179+
transition: background 0.2s ease;
180+
border-radius: 1em;
181+
height: 0.5em;
182+
top: 0;
183+
user-select: none;
184+
z-index: 1;
185+
}
186+
187+
.rangeSlider.vertical .rangeBar {
188+
width: 0.5em;
189+
height: auto;
190+
}
191+
192+
.rangeSlider {
193+
background-color: #d7dada;
194+
background-color: var(--slider);
195+
}
196+
197+
.rangeSlider .rangeBar {
198+
background-color: #99a2a2;
199+
background-color: var(--range-inactive);
200+
}
201+
202+
.rangeSlider.focus .rangeBar {
203+
background-color: #838de7;
204+
background-color: var(--range);
205+
}
206+
207+
.rangeSlider .rangeNub {
208+
background-color: #99a2a2;
209+
background-color: var(--handle-inactive);
210+
}
211+
212+
.rangeSlider.focus .rangeNub {
213+
background-color: #838de7;
214+
background-color: var(--handle);
215+
}
216+
217+
.rangeSlider .rangeHandle.active .rangeNub {
218+
background-color: #4a40d4;
219+
background-color: var(--handle-focus);
220+
}
221+
222+
.rangeSlider .rangeFloat {
223+
color: white;
224+
color: var(--float-text);
225+
background-color: #99a2a2;
226+
background-color: var(--float-inactive);
227+
}
228+
229+
.rangeSlider.focus .rangeFloat {
230+
background-color: #4a40d4;
231+
background-color: var(--float);
232+
}
233+
234+
.rangeSlider.disabled {
235+
opacity: 0.5;
236+
}
237+
238+
.rangeSlider.disabled .rangeNub {
239+
background-color: #d7dada;
240+
background-color: var(--slider);
241+
}
242+
243+
244+
/**
245+
* RangePips
246+
*/
247+
248+
.rangeSlider {
249+
--pip: var(--range-pip, lightslategray);
250+
--pip-text: var(--range-pip-text, var(--pip));
251+
--pip-active: var(--range-pip-active, darkslategrey);
252+
--pip-active-text: var(--range-pip-active-text, var(--pip-active));
253+
--pip-hover: var(--range-pip-hover, darkslategrey);
254+
--pip-hover-text: var(--range-pip-hover-text, var(--pip-hover));
255+
--pip-in-range: var(--range-pip-in-range, var(--pip-active));
256+
--pip-in-range-text: var(--range-pip-in-range-text, var(--pip-active-text));
257+
}
258+
259+
.rangePips {
260+
position: absolute;
261+
height: 1em;
262+
left: 0;
263+
right: 0;
264+
bottom: -1em;
265+
font-variant-numeric: tabular-nums;
266+
}
267+
268+
.rangePips.vertical {
269+
height: auto;
270+
width: 1em;
271+
left: 100%;
272+
right: auto;
273+
top: 0;
274+
bottom: 0;
275+
}
276+
277+
.rangePips .pip {
278+
height: 0.4em;
279+
position: absolute;
280+
top: 0.25em;
281+
width: 1px;
282+
white-space: nowrap;
283+
}
284+
285+
.rangePips.vertical .pip {
286+
height: 1px;
287+
width: 0.4em;
288+
left: 0.25em;
289+
top: auto;
290+
bottom: auto;
291+
}
292+
293+
.rangePips .pipVal {
294+
position: absolute;
295+
top: 0.4em;
296+
transform: translate(-50%, 25%);
297+
}
298+
299+
.rangePips.vertical .pipVal {
300+
position: absolute;
301+
top: 0;
302+
left: 0.4em;
303+
transform: translate(25%, -50%);
304+
}
305+
306+
.rangePips .pip {
307+
transition: all 0.15s ease;
308+
}
309+
310+
.rangePips .pipVal {
311+
transition: all 0.15s ease, font-weight 0s linear;
312+
}
313+
314+
.rangePips .pip {
315+
color: lightslategray;
316+
color: var(--pip-text);
317+
background-color: lightslategray;
318+
background-color: var(--pip);
319+
}
320+
321+
.rangePips .pip.selected {
322+
color: darkslategrey;
323+
color: var(--pip-active-text);
324+
background-color: darkslategrey;
325+
background-color: var(--pip-active);
326+
}
327+
328+
.rangePips.hoverable:not(.disabled) .pip:hover {
329+
color: darkslategrey;
330+
color: var(--pip-hover-text);
331+
background-color: darkslategrey;
332+
background-color: var(--pip-hover);
333+
}
334+
335+
.rangePips .pip.in-range {
336+
color: darkslategrey;
337+
color: var(--pip-in-range-text);
338+
background-color: darkslategrey;
339+
background-color: var(--pip-in-range);
340+
}
341+
342+
.rangePips .pip.selected {
343+
height: 0.75em;
344+
}
345+
346+
.rangePips.vertical .pip.selected {
347+
height: 1px;
348+
width: 0.75em;
349+
}
350+
351+
.rangePips .pip.selected .pipVal {
352+
font-weight: bold;
353+
top: 0.75em;
354+
}
355+
356+
.rangePips.vertical .pip.selected .pipVal {
357+
top: 0;
358+
left: 0.75em;
359+
}
360+
361+
.rangePips.hoverable:not(.disabled) .pip:not(.selected):hover {
362+
transition: none;
363+
}
364+
365+
.rangePips.hoverable:not(.disabled) .pip:not(.selected):hover .pipVal {
366+
transition: none;
367+
font-weight: bold;
368+
}

0 commit comments

Comments
 (0)