Skip to content

Commit decd866

Browse files
simeydotmesimeydotme
committed
add test folder, fixup css color vars, formatting
1 parent 3893dc6 commit decd866

File tree

12 files changed

+1127
-142
lines changed

12 files changed

+1127
-142
lines changed

‎src/RangePips.svelte‎

Lines changed: 67 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -37,53 +37,15 @@
3737
};
3838
</script>
3939

40-
<div class="rangeSlider__pips" class:focus>
41-
{#if first}
42-
<span
43-
class="rangeSlider__pip is-first"
44-
class:selected="{isSelected(min)}"
45-
class:in-range="{inRange(min)}"
46-
style="left: 0%;">
47-
{#if first === "label"}
48-
<span class="rangeSlider__pipval">
49-
{prefix}{ formatter(min) }{suffix}
50-
</span>
51-
{/if}
52-
</span>
53-
{/if}
54-
{#if rest}
55-
{#each Array(pipCount+1) as _, i}
56-
{#if pipVal(i) !== min && pipVal(i) !== max}
57-
<span
58-
class="rangeSlider__pip"
59-
class:selected="{isSelected(pipVal(i))}"
60-
class:in-range="{inRange(pipVal(i))}"
61-
style="left: {percentOf(pipVal(i))}%;">
62-
{#if rest === "label"}
63-
<span class="rangeSlider__pipval">
64-
{prefix}{ formatter(pipVal(i)) }{suffix}
65-
</span>
66-
{/if}
67-
</span>
68-
{/if}
69-
{/each}
70-
{/if}
71-
{#if last}
72-
<span
73-
class="rangeSlider__pip is-last"
74-
class:selected="{isSelected(max)}"
75-
class:in-range="{inRange(max)}"
76-
style="left: 100%;">
77-
{#if last === "label"}
78-
<span class="rangeSlider__pipval">
79-
{prefix}{ formatter(max) }{suffix}
80-
</span>
81-
{/if}
82-
</span>
83-
{/if}
84-
</div>
85-
8640
<style>
41+
:global(.rangeSlider) {
42+
--pip: var(--range-pip, lightslategray);
43+
--pip-text: var(--range-pip-text, var(--pip));
44+
--pip-active: var(--range-pip-active, darkslategrey);
45+
--pip-active-text: var(--range-pip-active-text, var(--pip-active));
46+
--pip-in-range: var(--range-pip-in-range, var(--pip-active));
47+
--pip-in-range-text: var(--range-pip-in-range-text, var(--pip-active-text));
48+
}
8749
.rangeSlider__pips {
8850
height: 1em;
8951
position: absolute;
@@ -115,12 +77,67 @@
11577
transition: all 0.15s ease;
11678
}
11779
.rangeSlider__pip {
118-
background: lightslategray;
11980
color: lightslategray;
81+
color: var(--pip-text);
82+
background-color: lightslategray;
83+
background-color: var(--pip);
84+
}
85+
.rangeSlider__pip.selected {
86+
color: darkslategrey;
87+
color: var(--pip-active-text);
88+
background-color: darkslategrey;
89+
background-color: var(--pip-active);
12090
}
121-
.rangeSlider__pip.selected,
12291
.rangeSlider__pip.in-range {
123-
background: darkslategrey;
12492
color: darkslategrey;
93+
color: var(--pip-in-range-text);
94+
background-color: darkslategrey;
95+
background-color: var(--pip-in-range);
12596
}
126-
</style>
97+
</style>
98+
99+
<div class="rangeSlider__pips" class:focus>
100+
{#if first}
101+
<span
102+
class="rangeSlider__pip is-first"
103+
class:selected={isSelected(min)}
104+
class:in-range={inRange(min)}
105+
style="left: 0%;">
106+
{#if first === 'label'}
107+
<span class="rangeSlider__pipval">
108+
{prefix}{formatter(min)}{suffix}
109+
</span>
110+
{/if}
111+
</span>
112+
{/if}
113+
{#if rest}
114+
{#each Array(pipCount + 1) as _, i}
115+
{#if pipVal(i) !== min && pipVal(i) !== max}
116+
<span
117+
class="rangeSlider__pip"
118+
class:selected={isSelected(pipVal(i))}
119+
class:in-range={inRange(pipVal(i))}
120+
style="left: {percentOf(pipVal(i))}%;">
121+
{#if rest === 'label'}
122+
<span class="rangeSlider__pipval">
123+
{prefix}{formatter(pipVal(i))}{suffix}
124+
</span>
125+
{/if}
126+
</span>
127+
{/if}
128+
{/each}
129+
{/if}
130+
{#if last}
131+
<span
132+
class="rangeSlider__pip is-last"
133+
class:selected={isSelected(max)}
134+
class:in-range={inRange(max)}
135+
style="left: 100%;">
136+
{#if last === 'label'}
137+
<span class="rangeSlider__pipval">
138+
{prefix}{formatter(max)}{suffix}
139+
</span>
140+
{/if}
141+
</span>
142+
{/if}
143+
</div>

‎src/RangeSlider.svelte‎

Lines changed: 103 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
export let rest;
1919
2020
// formatting props
21+
export let id;
2122
export let prefix = "";
2223
export let suffix = "";
2324
export let formatter = v => v;
@@ -391,94 +392,26 @@
391392
}
392393
</script>
393394

394-
395-
396-
397-
<div class="rangeSlider"
398-
bind:this="{slider}"
399-
on:touchstart|preventDefault="{sliderInteractStart}"
400-
on:mousedown="{sliderInteractStart}"
401-
class:focus
402-
class:range
403-
class:min={range === 'min'}
404-
class:max={range === 'max'}
405-
>
406-
{#each values as value, index}
407-
<span
408-
role="slider"
409-
tabindex="0"
410-
class="rangeSlider__handle"
411-
class:active="{ focus && activeHandle === index }"
412-
on:blur={sliderBlurHandle}
413-
on:focus={sliderFocusHandle}
414-
on:keydown={sliderKeydown}
415-
style="left: { $springPositions[index] }%; z-index: { activeHandle === index ? 3 : 2 };"
416-
aria-valuemin="{ range===true && index === 1 ? values[0] : min }"
417-
aria-valuemax="{ range===true && index === 0 ? values[1] : max }"
418-
aria-valuenow="{value}"
419-
aria-valuetext="{ prefix }{ handleFormatter(value) }{ suffix }"
420-
aria-orientation="horizontal"
421-
>
422-
<span class="rangeSlider__nub">
423-
</span>
424-
{#if float}
425-
<span class="rangeSlider__value">
426-
{ prefix }{ handleFormatter(value) }{ suffix }
427-
</span>
428-
{/if}
429-
</span>
430-
{/each}
431-
{#if range}
432-
<span class="rangeSlider__range"
433-
style="left: { rangeStart( $springPositions ) }%;
434-
right: { rangeEnd( $springPositions ) }%;">
435-
</span>
436-
{/if}
437-
{#if pips}
438-
<RangePips
439-
{values}
440-
{min}
441-
{max}
442-
{step}
443-
{range}
444-
{first}
445-
{last}
446-
{rest}
447-
{pipstep}
448-
{prefix}
449-
{suffix}
450-
{formatter}
451-
{focus}
452-
{percentOf}
453-
/>
454-
{/if}
455-
</div>
456-
457-
<svelte:window
458-
on:mousedown={bodyInteractStart}
459-
on:touchstart={bodyInteractStart}
460-
on:mousemove={bodyInteract}
461-
on:touchmove={bodyInteract}
462-
on:mouseup={bodyMouseUp}
463-
on:touchend={bodyTouchEnd}
464-
on:keydown={bodyKeyDown} />
465-
466-
467-
468-
469-
470-
471-
472395
<style>
473-
:global(.rangeSlider *) {
474-
user-select: none;
396+
:global(.rangeSlider) {
397+
--slider: var(--range-slider, #d7dada);
398+
--handle-inactive: var(--range-handle-inactive, #99a2a2);
399+
--handle: var(--range-handle, #838de7);
400+
--handle-focus: var(--range-handle-focus, #4a40d4);
401+
--range-inactive: var(--range-range-inactive, var(--handle-inactive));
402+
--range: var(--range-range, var(--handle-focus));
403+
--float: var(--range-float, var(--handle-focus));
404+
--float-text: var(--range-float-text, white);
475405
}
476406
:global(.rangeSlider) {
477407
position: relative;
478408
border-radius: 100px;
479409
height: 0.5em;
480410
margin: 1em;
481411
}
412+
:global(.rangeSlider, .rangeSlider *) {
413+
user-select: none;
414+
}
482415
:global(.rangeSlider__handle) {
483416
position: absolute;
484417
display: block;
@@ -493,13 +426,13 @@
493426
left: 0;
494427
top: 0;
495428
display: block;
496-
border-radius: 100px;
429+
border-radius: 10em;
497430
height: 100%;
498431
width: 100%;
499432
transition: all 0.2s ease;
500433
}
501434
:global(.range:not(.min):not(.max) .rangeSlider__nub) {
502-
border-radius: 100px 100px 100px 20px;
435+
border-radius: 10em 10em 10em 1.6em;
503436
}
504437
:global(.range .rangeSlider__handle:nth-of-type(1) .rangeSlider__nub) {
505438
transform: rotate(-135deg);
@@ -540,22 +473,100 @@
540473
}
541474
:global(.rangeSlider) {
542475
background-color: #d7dada;
543-
background-color: var(--range-inactive);
476+
background-color: var(--slider);
544477
}
545-
:global(.rangeSlider__nub, .rangeSlider__range) {
478+
:global(.rangeSlider__range) {
546479
background-color: #99a2a2;
547-
background-color: var(--range-inactive-focus);
480+
background-color: var(--range-inactive);
548481
}
549-
:global(.rangeSlider.focus .rangeSlider__nub),
550482
:global(.rangeSlider.focus .rangeSlider__range) {
551483
background-color: #838de7;
552-
background-color: var(--range-active);
484+
background-color: var(--range);
485+
}
486+
:global(.rangeSlider__nub) {
487+
background-color: #99a2a2;
488+
background-color: var(--handle-inactive);
489+
}
490+
:global(.rangeSlider.focus .rangeSlider__nub) {
491+
background-color: #838de7;
492+
background-color: var(--handle);
553493
}
554-
:global(.rangeSlider.focus .rangeSlider__value),
555494
:global(.rangeSlider .rangeSlider__handle.active .rangeSlider__nub) {
495+
background-color: #4a40d4;
496+
background-color: var(--handle-focus);
497+
}
498+
:global(.rangeSlider__value) {
556499
color: white;
557-
color: var(--range-active-color);
558-
background-color: #584fd6;
559-
background-color: var(--range-active-focus);
500+
color: var(--float-text);
560501
}
561-
</style>
502+
:global(.rangeSlider.focus .rangeSlider__value) {
503+
background-color: #4a40d4;
504+
background-color: var(--float);
505+
}
506+
</style>
507+
508+
<div
509+
{id}
510+
bind:this={slider}
511+
class="rangeSlider"
512+
class:focus
513+
class:range
514+
class:min={range === 'min'}
515+
class:max={range === 'max'}
516+
on:touchstart|preventDefault={sliderInteractStart}
517+
on:mousedown={sliderInteractStart}>
518+
{#each values as value, index}
519+
<span
520+
role="slider"
521+
tabindex="0"
522+
class="rangeSlider__handle"
523+
class:active={focus && activeHandle === index}
524+
on:blur={sliderBlurHandle}
525+
on:focus={sliderFocusHandle}
526+
on:keydown={sliderKeydown}
527+
style="left: {$springPositions[index]}%; z-index: {activeHandle === index ? 3 : 2};"
528+
aria-valuemin={range === true && index === 1 ? values[0] : min}
529+
aria-valuemax={range === true && index === 0 ? values[1] : max}
530+
aria-valuenow={value}
531+
aria-valuetext="{prefix}{handleFormatter(value)}{suffix}"
532+
aria-orientation="horizontal">
533+
<span class="rangeSlider__nub" />
534+
{#if float}
535+
<span class="rangeSlider__value">
536+
{prefix}{handleFormatter(value)}{suffix}
537+
</span>
538+
{/if}
539+
</span>
540+
{/each}
541+
{#if range}
542+
<span
543+
class="rangeSlider__range"
544+
style="left: {rangeStart($springPositions)}%; right: {rangeEnd($springPositions)}%;" />
545+
{/if}
546+
{#if pips}
547+
<RangePips
548+
{values}
549+
{min}
550+
{max}
551+
{step}
552+
{range}
553+
{first}
554+
{last}
555+
{rest}
556+
{pipstep}
557+
{prefix}
558+
{suffix}
559+
{formatter}
560+
{focus}
561+
{percentOf} />
562+
{/if}
563+
</div>
564+
565+
<svelte:window
566+
on:mousedown={bodyInteractStart}
567+
on:touchstart={bodyInteractStart}
568+
on:mousemove={bodyInteract}
569+
on:touchmove={bodyInteract}
570+
on:mouseup={bodyMouseUp}
571+
on:touchend={bodyTouchEnd}
572+
on:keydown={bodyKeyDown} />

‎test/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/node_modules/
2+
/public/build/
3+
4+
.DS_Store

0 commit comments

Comments
 (0)