Skip to content

Commit fa9c464

Browse files
simeydotmesimeydotme
committed
test page updates
1 parent 1f57260 commit fa9c464

File tree

9 files changed

+303
-279
lines changed

9 files changed

+303
-279
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ node_modules
88
/tests/**/node_modules
99
/.svelte-kit
1010
/package
11+
*/routes/isolate
1112
.env
1213
.env.*
1314
!.env.example

‎dist/range-slider-pips.js‎

Lines changed: 92 additions & 81 deletions
Large diffs are not rendered by default.

‎dist/range-slider-pips.mjs‎

Lines changed: 92 additions & 81 deletions
Large diffs are not rendered by default.

‎dist/svelte/components/RangePips.svelte‎

Lines changed: 19 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ function labelUp(pipValue, event) {
6565
class:selected={isSelected(min, values, precision)}
6666
class:in-range={isInRange(min, values, range)}
6767
style="{orientationStart}: 0%;"
68+
data-val={coerceFloat(min, precision)}
6869
on:pointerdown={(e) => {
6970
labelDown(e);
7071
}}
@@ -74,46 +75,36 @@ function labelUp(pipValue, event) {
7475
>
7576
{#if all === 'label' || first === 'label'}
7677
<span class="pipVal">
77-
{#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{@html formatter(
78-
coerceFloat(min),
79-
0,
80-
0
81-
)}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
78+
{#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}
79+
{@html formatter(coerceFloat(min, precision), 0, 0)}
80+
{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
8281
</span>
8382
{/if}
8483
</span>
8584
{/if}
8685
8786
{#if (all && rest !== false) || rest}
8887
{#each Array(pipCount + 1) as _, i}
89-
{#if getValueFromIndex(i, min, max, pipStep, step) !== min && getValueFromIndex(i, min, max, pipStep, step) !== max}
88+
{@const val = getValueFromIndex(i, min, max, pipStep, step, precision)}
89+
{#if val !== min && val !== max}
9090
<span
9191
class="pip"
92-
class:selected={isSelected(
93-
getValueFromIndex(i, min, max, pipStep, step),
94-
values,
95-
precision
96-
)}
97-
class:in-range={isInRange(getValueFromIndex(i, min, max, pipStep, step), values, range)}
98-
style="{orientationStart}: {valueAsPercent(
99-
getValueFromIndex(i, min, max, pipStep, step),
100-
min,
101-
max
102-
)}%;"
92+
class:selected={isSelected(val, values, precision)}
93+
class:in-range={isInRange(val, values, range)}
94+
style="{orientationStart}: {valueAsPercent(val, min, max, precision)}%;"
95+
data-val={val}
10396
on:pointerdown={(e) => {
10497
labelDown(e);
10598
}}
10699
on:pointerup={(e) => {
107-
labelUp(getValueFromIndex(i, min, max, pipStep, step), e);
100+
labelUp(val, e);
108101
}}
109102
>
110103
{#if all === 'label' || rest === 'label'}
111104
<span class="pipVal">
112-
{#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{@html formatter(
113-
getValueFromIndex(i, min, max, pipStep, step),
114-
i,
115-
valueAsPercent(getValueFromIndex(i, min, max, pipStep, step), min, max, precision)
116-
)}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
105+
{#if true || prefix}<span class="pipVal-prefix">{prefix}</span>{/if}
106+
{@html formatter(val, i, valueAsPercent(val, min, max, precision))}
107+
{#if true || suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
117108
</span>
118109
{/if}
119110
</span>
@@ -127,6 +118,7 @@ function labelUp(pipValue, event) {
127118
class:selected={isSelected(max, values, precision)}
128119
class:in-range={isInRange(max, values, range)}
129120
style="{orientationStart}: 100%;"
121+
data-val={coerceFloat(max, precision)}
130122
on:pointerdown={(e) => {
131123
labelDown(e);
132124
}}
@@ -136,11 +128,9 @@ function labelUp(pipValue, event) {
136128
>
137129
{#if all === 'label' || last === 'label'}
138130
<span class="pipVal">
139-
{#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{@html formatter(
140-
coerceFloat(max),
141-
pipCount,
142-
100
143-
)}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
131+
{#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}
132+
{@html formatter(coerceFloat(max, precision), pipCount, 100)}
133+
{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
144134
</span>
145135
{/if}
146136
</span>
@@ -201,6 +191,7 @@ function labelUp(pipValue, event) {
201191
position: absolute;
202192
top: 0.4em;
203193
transform: translate(-50%, 25%);
194+
display: inline-flex;
204195
}
205196
206197
:global(.rangePips.vertical .pipVal) {

‎dist/svelte/components/RangePips.svelte.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ declare const __propDef: {
2222
formatter?: Formatter | undefined;
2323
precision?: number | undefined;
2424
focus: boolean;
25-
orientationStart: string;
25+
orientationStart: 'left' | 'right' | 'top' | 'bottom';
2626
moveHandle: (index: number | null, value: number) => void;
2727
};
2828
events: {

‎dist/svelte/utils.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,4 +81,4 @@ export declare const isSelected: (value: number, values: number[], precision?: n
8181
* @param step the step of the range slider
8282
* @returns {number} the value of the pip
8383
*/
84-
export declare const getValueFromIndex: (index: number, min: number, max: number, pipStep: number, step: number) => number;
84+
export declare const getValueFromIndex: (index: number, min: number, max: number, pipStep: number, step: number, precision?: number) => number;

‎dist/svelte/utils.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,6 @@ export const isSelected = (value, values, precision = 2) => {
149149
* @param step the step of the range slider
150150
* @returns {number} the value of the pip
151151
*/
152-
export const getValueFromIndex = (index, min, max, pipStep, step) => {
153-
return coerceFloat(min + index * step * pipStep);
152+
export const getValueFromIndex = (index, min, max, pipStep, step, precision = 2) => {
153+
return coerceFloat(min + index * step * pipStep, precision);
154154
};

‎src/routes/+layout.svelte‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<svelte:head>
2+
<link rel="preconnect" href="https://fonts.googleapis.com" />
3+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
4+
<link
5+
href="https://fonts.googleapis.com/css2?family=Inter:wght@300,400,600&display=swap"
6+
rel="stylesheet"
7+
/>
8+
<style>
9+
#test-id {
10+
--range-slider: #9dceff;
11+
--range-handle: rgb(245, 200, 230);
12+
--range-handle-inactive: rgb(245, 200, 230);
13+
--range-handle-focus: rgb(245, 0, 46);
14+
}
15+
#test-id [data-handle='1'] {
16+
--handle: #a0ffe0;
17+
--handle-inactive: var(--handle);
18+
--handle-border: var(--handle);
19+
--handle-focus: turquoise;
20+
}
21+
#test-id [data-handle='2'] {
22+
--handle: #fdcebd;
23+
--handle-inactive: var(--handle);
24+
--handle-border: var(--handle);
25+
--handle-focus: coral;
26+
}
27+
#clr-test {
28+
--range-slider: rgb(195, 228, 222);
29+
--range-handle-inactive: rgb(81, 185, 180);
30+
--range-handle: rgb(81, 185, 180);
31+
--range-handle-focus: rgb(35, 241, 214);
32+
--range-float-text: darkcyan;
33+
--pip: #eee;
34+
--pip-text: #aaa;
35+
--pip-active: black;
36+
--pip-active-text: darkcyan;
37+
}
38+
table {
39+
width: 100%;
40+
}
41+
header {
42+
position: sticky;
43+
top: 0;
44+
padding: 20px;
45+
background: white;
46+
z-index: 100;
47+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
48+
margin-bottom: 20px;
49+
}
50+
h1,
51+
h2,
52+
h3,
53+
h4,
54+
h5 {
55+
margin-top: 1em;
56+
font-weight: 400;
57+
}
58+
main {
59+
display: flex;
60+
justify-content: center;
61+
max-width: calc(100% - 40px);
62+
width: 1024px;
63+
margin: 100px auto;
64+
}
65+
.content {
66+
display: flex;
67+
flex-direction: column;
68+
gap: 1em;
69+
}
70+
</style>
71+
</svelte:head>
72+
73+
<slot />

‎src/routes/+page.svelte‎

Lines changed: 22 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -97,72 +97,6 @@
9797
let valueBind = 20;
9898
</script>
9999

100-
<svelte:head>
101-
<link rel="preconnect" href="https://fonts.googleapis.com" />
102-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
103-
<link
104-
href="https://fonts.googleapis.com/css2?family=Inter:wght@300,400,600&display=swap"
105-
rel="stylesheet"
106-
/>
107-
<style>
108-
#test-id {
109-
--range-slider: #9dceff;
110-
--range-handle: rgb(245, 200, 230);
111-
--range-handle-inactive: rgb(245, 200, 230);
112-
--range-handle-focus: rgb(245, 0, 46);
113-
}
114-
#test-id [data-handle='1'] {
115-
--handle: #a0ffe0;
116-
--handle-inactive: var(--handle);
117-
--handle-border: var(--handle);
118-
--handle-focus: turquoise;
119-
}
120-
#test-id [data-handle='2'] {
121-
--handle: #fdcebd;
122-
--handle-inactive: var(--handle);
123-
--handle-border: var(--handle);
124-
--handle-focus: coral;
125-
}
126-
#clr-test {
127-
--range-slider: rgb(195, 228, 222);
128-
--range-handle-inactive: rgb(81, 185, 180);
129-
--range-handle: rgb(81, 185, 180);
130-
--range-handle-focus: rgb(35, 241, 214);
131-
--range-float-text: darkcyan;
132-
--pip: #eee;
133-
--pip-text: #aaa;
134-
--pip-active: black;
135-
--pip-active-text: darkcyan;
136-
}
137-
table {
138-
width: 100%;
139-
}
140-
header {
141-
position: sticky;
142-
top: 0;
143-
padding: 20px;
144-
background: white;
145-
z-index: 100;
146-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
147-
margin-bottom: 20px;
148-
}
149-
h1,
150-
h2,
151-
h3,
152-
h4 {
153-
margin-top: 2em;
154-
font-weight: 400;
155-
}
156-
main {
157-
display: flex;
158-
justify-content: center;
159-
max-width: calc(100% - 40px);
160-
width: 1024px;
161-
margin: 100px auto;
162-
}
163-
</style>
164-
</svelte:head>
165-
166100
<header>
167101
<button
168102
on:click={() => {
@@ -631,7 +565,7 @@
631565
min={-0.01}
632566
max={0.01}
633567
step={0.0005}
634-
precision={3}
568+
precision={5}
635569
{reversed}
636570
{hoverable}
637571
{disabled}
@@ -643,9 +577,10 @@
643577
float
644578
pips
645579
all="label"
646-
min={-0.01}
647-
max={0.01}
648-
step={0.0005}
580+
min={-0.11}
581+
max={0.11}
582+
step={0.01}
583+
pipstep={1}
649584
precision={5}
650585
{reversed}
651586
{hoverable}
@@ -834,20 +769,22 @@
834769
<h4>Value as Input</h4>
835770
<RangeSlider bind:value={valueBind} pips all="label" {reversed} {hoverable} {disabled} />
836771
{valueBind}
837-
<button
838-
on:click={() => {
839-
valueBind = Math.random() * 100;
840-
}}>Random Value</button
841-
>
842-
<button
843-
on:click={() => {
844-
valueBind = [99];
845-
}}>Array Value</button
846-
>
847-
<button
848-
on:click={() => {
849-
valueBind = '69';
850-
}}>Invalid Value</button
851-
>
772+
<div style="display: flex; gap: 1em;">
773+
<button
774+
on:click={() => {
775+
valueBind = Math.random() * 100;
776+
}}>Random Valid Value</button
777+
>
778+
<button
779+
on:click={() => {
780+
valueBind = [99];
781+
}}>Invalid Array Value [99]</button
782+
>
783+
<button
784+
on:click={() => {
785+
valueBind = '69';
786+
}}>Invalid String Value '69'</button
787+
>
788+
</div>
852789
</div>
853790
</main>

0 commit comments

Comments
 (0)