}
20 | */
21 | async function scanDirectory(dir, basePath = '') {
22 | const entries = await fs.readdir(dir, { withFileTypes: true });
23 |
24 | /** @type {NavItem[]} */
25 | const result = [];
26 |
27 | for (const entry of entries) {
28 | const relativePath = path.join(basePath, entry.name);
29 |
30 | if (entry.isDirectory()) {
31 | // Skip directories that start with underscore or dot
32 | if (entry.name.startsWith('_') || entry.name.startsWith('.')) continue;
33 |
34 | // Recursively scan subdirectories
35 | const children = await scanDirectory(path.join(dir, entry.name), relativePath);
36 |
37 | // Check if directory has a +page.svelte directly inside it
38 | const hasPage = await fs
39 | .access(path.join(dir, entry.name, '+page.svelte'))
40 | .then(() => true)
41 | .catch(() => false);
42 |
43 | // Only add directory if it has children or contains a +page.svelte
44 | if (children.length > 0 || hasPage) {
45 | /** @type {NavItem} */
46 | const navItem = {
47 | name: entry.name,
48 | path: hasPage ? `/test/range-slider/${relativePath}` : '',
49 | ...(children.length > 0 ? { children } : {})
50 | };
51 |
52 | result.push(navItem);
53 | }
54 | }
55 | }
56 |
57 | return result;
58 | }
59 |
60 | async function generateNavigation() {
61 | try {
62 | const navigation = await scanDirectory(routesDir);
63 |
64 | // Sort by name
65 | navigation.sort((a, b) => a.name.localeCompare(b.name));
66 |
67 | // Write to JSON file with proper indentation
68 | await fs.writeFile(outputFile, JSON.stringify(navigation, null, 2));
69 | console.log(`Navigation data written to ${outputFile}`);
70 | } catch (error) {
71 | console.error('Error generating navigation:', error);
72 | process.exit(1);
73 | }
74 | }
75 |
76 | generateNavigation();
77 |
--------------------------------------------------------------------------------
/src/routes/test/nav/test-nav.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "name": "base",
4 | "path": "/test/range-slider/base"
5 | },
6 | {
7 | "name": "events",
8 | "path": "/test/range-slider/events"
9 | },
10 | {
11 | "name": "floats",
12 | "path": "/test/range-slider/floats"
13 | },
14 | {
15 | "name": "formatters",
16 | "path": "",
17 | "children": [
18 | {
19 | "name": "handle",
20 | "path": "/test/range-slider/formatters/handle"
21 | },
22 | {
23 | "name": "pips",
24 | "path": "/test/range-slider/formatters/pips"
25 | },
26 | {
27 | "name": "range",
28 | "path": "/test/range-slider/formatters/range"
29 | }
30 | ]
31 | },
32 | {
33 | "name": "limits",
34 | "path": "/test/range-slider/limits"
35 | },
36 | {
37 | "name": "minmax",
38 | "path": "/test/range-slider/minmax",
39 | "children": [
40 | {
41 | "name": "custom-min-max",
42 | "path": "/test/range-slider/minmax/custom-min-max"
43 | },
44 | {
45 | "name": "decimal-min-max",
46 | "path": "/test/range-slider/minmax/decimal-min-max"
47 | },
48 | {
49 | "name": "explicit-value",
50 | "path": "/test/range-slider/minmax/explicit-value"
51 | },
52 | {
53 | "name": "invalid-min-max",
54 | "path": "/test/range-slider/minmax/invalid-min-max"
55 | },
56 | {
57 | "name": "negative-min-max",
58 | "path": "/test/range-slider/minmax/negative-min-max"
59 | }
60 | ]
61 | },
62 | {
63 | "name": "pips",
64 | "path": "/test/range-slider/pips",
65 | "children": [
66 | {
67 | "name": "labels",
68 | "path": "/test/range-slider/pips/labels"
69 | },
70 | {
71 | "name": "limits",
72 | "path": "/test/range-slider/pips/limits"
73 | },
74 | {
75 | "name": "pips",
76 | "path": "/test/range-slider/pips/pips"
77 | },
78 | {
79 | "name": "pipsteps",
80 | "path": "/test/range-slider/pips/pipsteps"
81 | },
82 | {
83 | "name": "pipsteps-large",
84 | "path": "/test/range-slider/pips/pipsteps-large"
85 | },
86 | {
87 | "name": "steps",
88 | "path": "/test/range-slider/pips/steps"
89 | }
90 | ]
91 | },
92 | {
93 | "name": "range",
94 | "path": "/test/range-slider/range",
95 | "children": [
96 | {
97 | "name": "draggy",
98 | "path": "/test/range-slider/range/draggy"
99 | },
100 | {
101 | "name": "false",
102 | "path": "/test/range-slider/range/false"
103 | },
104 | {
105 | "name": "gaps",
106 | "path": "/test/range-slider/range/gaps"
107 | },
108 | {
109 | "name": "max",
110 | "path": "/test/range-slider/range/max"
111 | },
112 | {
113 | "name": "min",
114 | "path": "/test/range-slider/range/min"
115 | },
116 | {
117 | "name": "pushy",
118 | "path": "/test/range-slider/range/pushy"
119 | }
120 | ]
121 | },
122 | {
123 | "name": "states",
124 | "path": "",
125 | "children": [
126 | {
127 | "name": "disabled",
128 | "path": "/test/range-slider/states/disabled"
129 | },
130 | {
131 | "name": "hoverable",
132 | "path": "/test/range-slider/states/hoverable"
133 | },
134 | {
135 | "name": "reversed",
136 | "path": "/test/range-slider/states/reversed"
137 | }
138 | ]
139 | },
140 | {
141 | "name": "styles",
142 | "path": "",
143 | "children": [
144 | {
145 | "name": "darkmode",
146 | "path": "/test/range-slider/styles/darkmode"
147 | }
148 | ]
149 | },
150 | {
151 | "name": "values",
152 | "path": "",
153 | "children": [
154 | {
155 | "name": "binding",
156 | "path": "",
157 | "children": [
158 | {
159 | "name": "multiple",
160 | "path": "/test/range-slider/values/binding/multiple"
161 | },
162 | {
163 | "name": "single",
164 | "path": "/test/range-slider/values/binding/single"
165 | }
166 | ]
167 | },
168 | {
169 | "name": "constrained-values",
170 | "path": "/test/range-slider/values/constrained-values"
171 | },
172 | {
173 | "name": "explicit-value",
174 | "path": "/test/range-slider/values/explicit-value"
175 | },
176 | {
177 | "name": "multiple-values",
178 | "path": "/test/range-slider/values/multiple-values"
179 | },
180 | {
181 | "name": "seven-values",
182 | "path": "/test/range-slider/values/seven-values"
183 | },
184 | {
185 | "name": "single-value",
186 | "path": "/test/range-slider/values/single-value"
187 | },
188 | {
189 | "name": "value-values",
190 | "path": "/test/range-slider/values/value-values"
191 | }
192 | ]
193 | }
194 | ]
195 |
--------------------------------------------------------------------------------
/src/routes/test/range-slider/+layout.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 | ($isNavVisible = false)}
15 | >
16 | ($isNavVisible = !$isNavVisible)}>
19 | {@html feather.icons.menu.toSvg()}
20 |
21 |
22 |
23 | Basic slider with default settings
6 |
51 |
Range Slider Event Tests
52 |
53 |
54 |
55 |
58 |
59 |
62 |
63 |
64 |
65 |
Test Scenarios
66 |
67 | clearTestScenario()}> Clear Event History
68 |
69 |
70 |
71 |
Single Handle Slider
72 |
73 |
83 |
84 |
85 |
86 |
Range Slider
87 |
88 |
101 |
102 |
103 |
104 |
Disabled Slider
105 |
106 |
119 |
120 |
121 |
122 |
Multi-Handle Slider
123 |
124 |
134 |
135 |
136 |
137 |
Last Event
138 | {#if lastEvent}
139 |
140 |
type: {lastEvent.type}
141 |
{formatEventDetail(lastEvent.detail)}
142 |
143 | {:else}
144 |
No events yet
145 | {/if}
146 |
147 |
Event History
148 | {#if events.length > 0}
149 |
150 | {#each events as event}
151 |
152 |
type: {event.type}
153 |
{formatEventDetail(event.detail)}
154 |
155 | {/each}
156 |
157 | {:else}
158 |
No events recorded
159 | {/if}
160 |
161 |
32 |
Basic Float Tests
33 |
34 |
35 |
36 |
Basic RangeFloat Tests
37 |
38 |
39 |
40 |
Formatted Floats
41 |
42 |
43 |
52 |
53 |
Edge Cases
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
Float + RangeFloat Interactions
62 |
63 |
64 |
65 |
Orientation Tests
66 |
67 |
68 |
69 |
70 |
71 |
Interactive State Tests
72 |
73 |
74 |
75 |
76 |
77 |
Accessibility Tests
78 |
86 |
87 |
Dynamic Toggle Tests
88 |
89 |
90 |
91 | (float = !float)}>Toggle float ({float ? 'on' : 'off'})
92 | (rangeFloat = !rangeFloat)}
93 | >Toggle rangeFloat ({rangeFloat ? 'on' : 'off'})
95 | (vertical = !vertical)}
96 | >Toggle vertical ({vertical ? 'on' : 'off'})
98 | (reversed = !reversed)}
99 | >Toggle reversed ({reversed ? 'on' : 'off'})
101 |
102 |
103 |
58 |
Basic Formatter Tests
59 |
Default formatter - no formatting applied
60 |
61 |
62 |
Number formatter - displays values with 2 decimal places
63 |
64 |
65 |
Currency formatter - displays values with $ prefix and 2 decimal places
66 |
67 |
68 |
Percent formatter - displays values as percentages with 1 decimal place
69 |
70 |
71 |
Index formatter - displays pip number and value
72 |
73 |
74 |
HTML formatter - displays values with HTML formatting
75 |
76 |
77 |
Locale formatter - displays values with locale formatting
78 |
79 |
80 |
Edge Cases
81 |
Large numbers - handles values in millions
82 |
new Intl.NumberFormat('en-US', { notation: 'compact', compactDisplay: 'short' }).format(v)}
89 | />
90 |
91 | Negative numbers - handles negative values
92 | Decimal numbers - handles values with decimal places
95 | Extreme values - handles very large positive and negative values
98 | Dynamic Formatter Tests
101 |
102 |
Dynamic formatter - tests runtime formatter changes
103 |
111 |
Current formatter: {formatters[currentFormatter].name}
112 |
113 | Change Formatter
114 |
115 | {currentPrefix ? 'Remove' : 'Add'} Prefix
116 |
117 |
118 | {currentSuffix ? 'Remove' : 'Add'} Suffix
119 |
120 |
121 |
Enable/Disable formatter - tests formatter toggle
124 | v} />
125 |
126 |
127 | {formatterEnabled ? 'Disable' : 'Enable'} Formatter
128 |
129 |
130 |
131 | Failing Cases
132 | No pips - formatter should not be applied
133 | Pips without labels - formatter should not be visible
136 | Pips with all=false - formatter should not be visible
139 | First pip only - should only show first pip label
142 | Last pip only - should only show last pip label
145 | Rest pips only - should only show rest pip labels
148 | Pips with selective labels (first/last only)
151 | Pips with rest only
154 | Performance Tests
157 | Heavy formatter - tests performance with computationally expensive formatter
158 | Formatter Context Tests
161 | Reversed mode - tests percentage calculation in reversed orientation
162 | Vertical mode - tests formatting in vertical orientation
165 | Custom range - tests formatting with non-standard min/max values
168 | Step values - tests formatting with non-unit step values
171 |
37 |
Single handle with limits
38 |
39 |
40 |
Reversed horizontal slider with limits
41 |
42 |
43 |
Range slider with limits
44 |
45 |
46 |
Range slider with limits and pushy
47 |
48 |
49 |
Range slider with limits and rangeGap
50 |
58 |
59 |
Vertical slider with limits
60 |
61 |
62 |
Reversed vertical slider with limits
63 |
73 |
74 |
Dynamic controls
75 |
76 |
77 | Min Limit:
78 |
80 |
81 | Max Limit:
82 |
84 |
85 | Range Gap Min:
86 |
88 |
89 | Range Gap Max:
90 |
92 |
93 | {hasRange ? 'Remove Range' : 'Add Range'}
94 |
95 |
96 | {hasLimits ? 'Remove Limits' : 'Add Limits'}
97 |
98 |
99 | {pushy ? 'Disable Pushy' : 'Enable Pushy'}
100 |
101 |
102 |
111 |
6 |
Default Min/Max Tests
7 | Default min/max (0/100)
8 | Min Only Tests
11 | Positive min (20)
12 | Negative min (-50)
15 | Decimal min (10.5)
18 | Large min (1000)
21 | Very large min (1000000)
24 | Max Only Tests
27 | Small max (50)
28 | Negative max (-20)
31 | Decimal max (75.5)
34 | Large max (1000)
37 | Very large max (1000000)
40 | Combined Min/Max Tests
43 | Positive range (20/80)
44 | Negative range (-80/-20)
47 | Cross-zero range (-50/50)
50 | Decimal range (10.5/90.5)
53 | Large range (1000/10000)
56 | Very large range (1000000/2000000)
59 | Asymmetric Range Tests
62 | Small to large (1/1000)
63 | Negative to large (-100/1000)
66 | Very negative to small (-1000/10)
69 | Decimal to whole (0.5/100)
72 | Whole to decimal (0/99.9)
75 | Edge Cases
78 | Very close range (49.9/50.1)
79 | Tiny decimal range (0.001/0.009)
82 | Tiny decimal range (0.001/0.009) with precision set to 3
85 | Huge range (-1000000/1000000)
97 | Invalid Min/Max Tests
100 |
101 | Zero-width range (50/50)
102 | Min greater than max (80/20)
105 | Max less than min (-20/-80)
108 | NaN values
111 | Infinite values
114 | Slider with custom min/max range (-50 to 50)
6 | Slider with decimal min/max range (0.5 to 2.5)
6 | Slider with explicit value (90) in range (0 to 200)
6 | Slider with invalid min/max (min > max)
6 | Slider with invalid min/max (max < min)
9 | Slider with NaN min
12 | Slider with NaN max
15 | Slider with Infinity min
18 | Slider with Infinity max
21 | Slider with -Infinity min
24 | Slider with -Infinity max
27 | Slider with negative min/max range (-100 to -50)
6 | Basic slider with default pips
6 |
6 |
All pips with labels
7 | Only first and last with labels
10 | Only rest with labels
13 | Only first with label
16 | Only last with label
19 | First and rest with labels
22 | Last and rest with labels
25 | No labels (all=false)
28 | No labels (first=false, last=false, rest=false)
31 | Labels with step=2.5
34 | Labels with step=7.3
37 | Labels with step=2.5 and custom min/max
40 | Labels with step=0.1
43 | Labels with max-min=1000
46 | Labels with max-min=10000
49 | Labels with max-min=100000
52 |
29 |
Default range mode
30 |
31 |
32 |
Range="min"
33 |
34 |
35 |
Range="max"
36 |
37 |
38 |
Range={true}
39 |
40 |
41 |
Limits
42 |
43 |
44 |
Range="min" with limits
45 |
46 |
47 |
Range="max" with limits
48 |
49 |
50 |
Range={true} with limits
51 |
52 |
53 |
61 |
Dynamic range and limits controls
62 |
63 |
64 | Min Limit:
65 |
67 |
68 | Max Limit:
69 |
71 |
72 | {hasRange ? 'Remove Range' : 'Add Range'}
73 |
74 |
75 | {hasLimits ? 'Remove Limits' : 'Add Limits'}
76 |
77 |
78 |
6 |
All pips visible
7 | Only first and last visible
10 | Only rest visible
13 | Only first visible
16 | Only last visible
19 | First and rest visible
22 | Last and rest visible
25 | No pips visible (all=false)
28 | No pips visible (first=false, last=false, rest=false)
31 |
17 |
Very large number of pips, explicitly set
18 |
17 |
Default pipstep (no pipstep prop)
18 |
19 |
20 |
pipstep=2 (shows every other step)
21 |
22 |
23 |
pipstep=5 (shows every 5th step)
24 |
25 |
26 |
pipstep=10 (shows every 10th step)
27 |
28 |
29 |
pipstep=2.5 (shows every 2.5th step)
30 |
31 |
32 |
pipstep=7.3 (shows every 7.3rd step)
33 |
34 |
35 |
pipstep=0.1 (should reduce due to stepMax limit)
36 |
37 |
38 |
pipstep=0.01 (should reduce due to 1000 pip limit)
39 |
40 |
41 |
pipstep=0.0001 (should reduce due to 1000 pip limit)
42 |
43 |
44 |
pipstep=2 with custom min/max
45 |
46 |
47 |
pipstep=5 with custom min/max
48 |
49 |
50 |
pipstep=2.5 with custom min/max
51 |
52 |
53 |
pipstep=7.3 with custom min/max
54 |
55 |
56 |
pipstep=2 with large range (max=1000)
57 |
58 |
59 |
pipstep=5 with large range (max=1000)
60 |
61 |
62 |
pipstep=10 with large range (max=1000)
63 |
64 |
65 |
pipstep=200 with very large range (max=10000)
66 |
67 |
68 |
pipstep=500 with very large range (max=100000)
69 |
70 |
71 |
pipstep=10 with very large range (max=10000)
72 |
73 |
74 |
Dynamic pipstep control (toggle between no pipstep and pipstep=2.5)
75 |
76 |
77 | {hasPipstep ? 'Remove Pipstep' : 'Add Pipstep'}
78 |
79 |
80 |
81 |
82 |
Dynamic pipstep values (toggle between pipstep=5 and pipstep=10)
83 |
84 |
85 | {hasAlternatePipstep ? 'Use Pipstep 5' : 'Use Pipstep 10'}
86 |
87 |
88 |
89 |
19 |
Default step (max-min = 100)
20 |
21 |
22 |
Default step (max-min = 1000)
23 |
24 |
25 |
Default step (max-min = 10000)
26 |
27 |
28 |
Default step (max-min = 100000)
29 |
30 |
31 |
Default step (max = 90)
32 |
33 |
34 |
Default step (min = 20)
35 |
36 |
37 |
Default step (min = -20, max = 50)
38 |
39 |
40 |
Step of 5
41 |
42 |
43 |
Step of 10
44 |
45 |
46 |
Step of 2.5
47 |
48 |
49 |
Step of 7.3
50 |
51 |
52 |
Step of 13.7
53 |
54 |
55 |
Step of 2.5 with custom min/max
56 |
57 |
58 |
Step of 7.3 with custom min/max
59 |
60 |
61 |
Step of 17 with custom min/max (wholly divisible)
62 |
63 |
64 |
Step of 23 with custom min/max (not wholly divisible)
65 |
66 |
67 |
Step of 0.1 (1000 steps)
68 |
69 |
70 |
Step of 0.01 (10000 steps)
71 |
72 |
73 |
Step of 100 (only 1 & 100 selectable)
74 |
75 |
76 |
Step of 0.0001 (crazy number of steps to choose)
77 |
78 |
79 |
Dynamic step control
80 |
81 |
82 | {hasDynamicStep ? 'Remove Step' : 'Add Step'}
83 |
84 |
85 |
86 |
87 |
Dynamic min/max with step
88 |
89 |
90 | {hasCustomMinMax ? 'Remove Min/Max' : 'Add Min/Max'}
91 |
92 |
93 |
101 |
6 |
Single handle range sliders (should not be a range due to only one value)
7 | Double handle range sliders
11 | Triple handle range sliders (should trim to double handle)
16 |
10 |
Basic range slider with draggy disabled
11 |
12 |
13 |
Range slider with draggy enabled
14 |
15 |
16 |
Range slider with fixed 10% gap and pushy behavior
17 |
18 |
19 |
20 |
Range slider with toggleable draggy behavior ({draggyToggle ? 'true' : 'false'})
21 | (draggyToggle = !draggyToggle)}
23 | >Toggle draggy ({draggyToggle ? 'true' : 'false'})
25 |
26 |
6 |
Single handle slider with range=false
7 | Double handle slider with range=false
10 | Triple handle slider with range=false
13 |
45 |
Basic Range Gap Tests
46 |
Default behavior - no gap constraints
47 |
48 |
49 |
Minimum gap only - handles cannot be closer than 20 units
50 |
51 |
52 |
Maximum gap only - handles cannot be further than 40 units
53 |
54 |
55 |
Both gaps - handles must be between 20 and 40 units apart
56 |
57 |
58 |
Edge Cases and Limits
59 |
Equal gaps - handles must be exactly 30 units apart
60 |
61 |
62 | (equalGapPushyToggle = !equalGapPushyToggle)}
66 | >
67 | Enable pushy mode ({equalGapPushyToggle ? 'true' : 'false'})
68 |
69 |
70 |
71 |
Zero gaps - handles can be at the same position
72 |
73 |
74 |
Large gaps - works with huge min/max values
75 |
84 |
85 |
Invalid gap values - min greater than max
86 |
87 |
88 |
Negative gap values - should be ignored
89 |
90 |
91 |
Gaps larger than range - should be constrained
92 |
93 |
94 |
Interaction with Range Slider Features
95 |
Pushy mode with gaps - handles push each other when gap constraints are met
96 |
97 |
98 |
Limits with gaps - handles respect both limits and gaps
99 |
100 |
101 |
Step with gaps - handles align to step while respecting gaps
102 |
103 |
104 |
Precision with gaps - handles respect precision while maintaining gaps
105 |
106 |
107 |
Dynamic Gap Tests
108 |
Dynamic gaps - gap constraints can be updated at runtime
109 |
110 |
111 | (dynamicGapMin += 5)}>Increase Min Gap
112 | (dynamicGapMin -= 5)}>Decrease Min Gap
113 | (dynamicGapMax += 5)}>Increase Max Gap
114 | (dynamicGapMax -= 5)}>Decrease Max Gap
115 |
116 |
117 |
Accessibility Tests
118 |
Gaps with aria labels - verify screen reader compatibility
119 |
120 |
121 |
Keyboard navigation with gaps - verify arrow key behavior
122 |
133 | {keyboardValues}
134 |
135 |
Event Handling Tests
136 |
Events with gaps - verify event payloads
137 |
147 |
148 |
Error Handling and Fallbacks
149 |
Disabled state with gaps - verify constraints maintained
150 |
151 |
152 |
Performance Tests
153 |
Large gap values - test performance with extreme gap constraints
154 |
155 |
6 |
Single handle max-range slider
7 | Double handle max-range slider (should trim to single handle)
10 | Triple handle max-range slider with custom max (should trim to single handle)
13 |
6 |
Single handle min-range slider
7 | Double handle min-range slider (should trim to single handle)
10 | Triple handle min-range slider with custom min (should trim to single handle)
13 |
23 |
Basic range slider with pushy disabled
24 |
25 |
26 |
Range slider with pushy enabled
27 |
28 |
29 |
30 |
Range slider with toggleable pushy behavior ({pushyToggle ? 'true' : 'false'})
31 | (pushyToggle = !pushyToggle)}
33 | >Toggle Pushy ({pushyToggle ? 'true' : 'false'})
35 |
36 |
37 |
Range slider with decimal steps (step=0.1)
38 |
39 |
40 |
Range slider in vertical orientation
41 |
42 |
43 |
Range slider with negative values
44 |
45 |
46 |
Range slider for edge cases
47 |
48 |
9 |
Disabled Single Slider
10 | Disabled Range Slider
22 | Dynamic Disabled State
35 | = 75}
39 | min={0}
40 | max={100}
41 | step={1}
42 | pips={true}
43 | all="label"
44 | />
45 |
46 |
--------------------------------------------------------------------------------
/src/routes/test/range-slider/states/hoverable/+page.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 |
Non-Hoverable Single Slider
11 | Non-Hoverable Range Slider
24 | Dynamic Hoverable State
38 | (isHoverable = !isHoverable)} class:btn-primary={isHoverable}>
39 | Toggle Hoverable ({isHoverable ? 'On' : 'Off'})
40 |
41 |
6 |
Single handle reversed slider
7 | Single handle reversed slider with custom range
10 | Double handle reversed range slider
13 | RangeSlider Darkmode Test Page
6 |
7 |
8 | Darkmode: false (default)
9 |
11 |
12 |
13 | Darkmode: auto (system)
14 |
16 |
17 |
18 | Darkmode: force
19 |
21 |
--------------------------------------------------------------------------------
/src/routes/test/range-slider/values/binding/multiple/+page.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
Range slider with two-way binding on multiple values
8 |
9 |
10 |
20 |
7 |
Slider with two-way binding on single value
8 |
9 |
10 |
11 |
12 | Current value:
14 | {value}
16 |
18 |
19 |
Slider with out-of-bounds values (should constrain to min/max)
6 | Slider with explicit value in custom range
6 | Slider with multiple values
6 | Slider with seven handles
6 | Basic slider with single value
6 | Slider with both value and values props (value should take precedence)
9 | Document
7 | Testing loading jQuery script
11 |
12 |
13 | -7,7
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/tests/jquery/index.jquery.js:
--------------------------------------------------------------------------------
1 | $(function () {
2 | const slider = document.querySelector('.my-slider');
3 | const rangeSliderPips = new RangeSliderPips({
4 | target: slider,
5 | props: {
6 | values: [-7, 7],
7 | pips: true,
8 | first: 'label',
9 | last: 'label',
10 | range: true,
11 | min: -10,
12 | max: 10
13 | }
14 | });
15 |
16 | // listen for changes to the slider and update the output
17 | const $output = $('#value-output');
18 | rangeSliderPips.$on('change', function (e) {
19 | $output.html(e.detail.values[0] + ',' + e.detail.values[1]);
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/tests/jquery/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "jquery-test",
3 | "private": true,
4 | "version": "1.0.0",
5 | "description": "Test of jQuery execution",
6 | "main": "index.html",
7 | "scripts": {
8 | "dev": "serve .",
9 | "start": "serve ."
10 | },
11 | "devDependencies": {
12 | "jquery": "^3.7.1",
13 | "range-slider-pips": "file:../..",
14 | "serve": "^14.2.1"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/tests/playwright/RangePips._.spec.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from '@playwright/test';
2 |
3 | test.describe('Basic Pips Tests', () => {
4 | test.beforeEach(async ({ page }) => {
5 | await page.goto('/test/range-slider/pips');
6 | await page.waitForLoadState('networkidle');
7 | });
8 |
9 | test('should render pips correctly with default settings', async ({ page }) => {
10 | // Check that pips container exists
11 | const pipsContainer = page.locator('.rangePips');
12 | await expect(pipsContainer).toBeVisible();
13 |
14 | // Check that first and last pips exist (default behavior)
15 | const firstPip = page.locator('.rsPip--first');
16 | const lastPip = page.locator('.rsPip--last');
17 | await expect(firstPip).toBeVisible();
18 | await expect(lastPip).toBeVisible();
19 |
20 | // Check that first pip shows min value (0)
21 | await expect(firstPip).toHaveAttribute('data-val', '0');
22 |
23 | // Check that last pip shows max value (100)
24 | await expect(lastPip).toHaveAttribute('data-val', '100');
25 |
26 | // Check that some intermediate pips exist
27 | const intermediatePips = page.locator('.rsPip:not(.rsPip--first):not(.rsPip--last)');
28 | await expect(intermediatePips).toHaveCount(await intermediatePips.count());
29 | expect(await intermediatePips.count()).toBeGreaterThan(0);
30 |
31 | // Check that the selected pip (at 50) is highlighted
32 | const selectedPip = page.locator('.rsPip.rsSelected');
33 | await expect(selectedPip).toBeVisible();
34 | await expect(selectedPip).toHaveAttribute('data-val', '50');
35 |
36 | // Check that pips are interactive by clicking one
37 | const handle = page.locator('.rangeHandle');
38 | const initialValue = await handle.getAttribute('aria-valuenow');
39 |
40 | // Click a pip value and verify the handle moves
41 | await page.locator('.rsPip[data-val="75"]').click();
42 | await expect(handle).toHaveAttribute('aria-valuenow', '75');
43 | await expect(handle, 'to be positioned at 75%').toHaveCSS('translate', '750px');
44 |
45 | // Verify the selected pip updates
46 | await expect(selectedPip).toHaveAttribute('data-val', '75');
47 | });
48 |
49 | test('no values are rendered for default setup', async ({ page }) => {
50 | // Check that pip values are not rendered
51 | const pipValues = page.locator('.rsPipVal');
52 | await expect(pipValues).toHaveCount(0);
53 | });
54 |
55 | test('should apply all the correct css classes', async ({ page }) => {
56 | // Check that the slider has the pips class
57 | const slider = page.locator('.rangeSlider');
58 | const pipsContainer = page.locator('.rangePips');
59 | const selectedPip = page.locator('.rsPip.rsSelected');
60 | const firstPip = page.locator('.rsPip--first');
61 | const lastPip = page.locator('.rsPip--last');
62 |
63 | // Check that the slider has the pips class
64 | await expect(slider).toHaveClass(/\brsPips\b/);
65 |
66 | // Check CSS classes on the pips container
67 | await expect(pipsContainer).toHaveClass(/\brsHoverable\b/);
68 | await expect(pipsContainer).not.toHaveClass(/\brsDisabled\b/);
69 | await expect(pipsContainer).not.toHaveClass(/\brsVertical\b/);
70 | await expect(pipsContainer).not.toHaveClass(/\brsReversed\b/);
71 | await expect(pipsContainer).not.toHaveClass(/\brsFocus\b/);
72 |
73 | // Check CSS classes on a regular pip
74 | const regularPip = page.locator('.rsPip:not(.rsPip--first):not(.rsPip--last):not(.rsSelected)').first();
75 | await expect(regularPip).toHaveClass(/\brsPip\b/);
76 | await expect(regularPip).not.toHaveClass(/\brsSelected\b/);
77 | await expect(regularPip).not.toHaveClass(/\brsInRange\b/);
78 | await expect(regularPip).not.toHaveClass(/\brsOutOfLimit\b/);
79 |
80 | // Check CSS classes on the selected pip
81 | await expect(selectedPip).toHaveClass(/\brsPip\b/);
82 | await expect(selectedPip).toHaveClass(/\brsSelected\b/);
83 | await expect(selectedPip).not.toHaveClass(/\brsInRange\b/);
84 | await expect(selectedPip).not.toHaveClass(/\brsOutOfLimit\b/);
85 |
86 | // Check CSS classes on first and last pips
87 | await expect(firstPip).toHaveClass(/\brsPip\b/);
88 | await expect(firstPip).toHaveClass(/\brsPip--first\b/);
89 | await expect(lastPip).toHaveClass(/\brsPip\b/);
90 | await expect(lastPip).toHaveClass(/\brsPip--last\b/);
91 | });
92 | });
93 |
--------------------------------------------------------------------------------
/tests/playwright/RangePips.pips.spec.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from '@playwright/test';
2 |
3 | test.describe('Pip Visibility Tests', () => {
4 | test.beforeEach(async ({ page }) => {
5 | await page.goto('/test/range-slider/pips/pips');
6 | await page.waitForLoadState('networkidle');
7 | });
8 |
9 | test('all pips should be visible when all="pip"', async ({ page }) => {
10 | const slider = page.locator('#all-pips');
11 | const pips = slider.locator('.rsPip');
12 |
13 | // All pips should be visible
14 | await expect(pips).toHaveCount(21);
15 | });
16 |
17 | test('only first and last should be visible when first="pip" last="pip" rest={false}', async ({ page }) => {
18 | const slider = page.locator('#first-last-pips');
19 | const firstPip = slider.locator('.rsPip--first');
20 | const lastPip = slider.locator('.rsPip--last');
21 | const restPips = slider.locator('.rsPip:not(.rsPip--first):not(.rsPip--last)');
22 |
23 | // Only first and last should be visible
24 | await expect(firstPip).toBeVisible();
25 | await expect(lastPip).toBeVisible();
26 | await expect(restPips).toHaveCount(0);
27 | });
28 |
29 | test('only rest should be visible when rest="pip"', async ({ page }) => {
30 | const slider = page.locator('#rest-pips');
31 | const firstPip = slider.locator('.rsPip--first');
32 | const lastPip = slider.locator('.rsPip--last');
33 | const restPips = slider.locator('.rsPip:not(.rsPip--first):not(.rsPip--last)');
34 |
35 | // Only rest should be visible
36 | await expect(firstPip).toHaveCount(0);
37 | await expect(lastPip).toHaveCount(0);
38 | await expect(restPips).toHaveCount(19);
39 | });
40 |
41 | test('only first should be visible when first="pip"', async ({ page }) => {
42 | const slider = page.locator('#first-pip');
43 | const firstPip = slider.locator('.rsPip--first');
44 | const otherPips = slider.locator('.rsPip:not(.rsPip--first)');
45 |
46 | // Only first should be visible
47 | await expect(firstPip).toBeVisible();
48 | await expect(otherPips).toHaveCount(0);
49 | });
50 |
51 | test('only last should be visible when last="pip"', async ({ page }) => {
52 | const slider = page.locator('#last-pip');
53 | const lastPip = slider.locator('.rsPip--last');
54 | const otherPips = slider.locator('.rsPip:not(.rsPip--last)');
55 |
56 | // Only last should be visible
57 | await expect(lastPip).toBeVisible();
58 | await expect(otherPips).toHaveCount(0);
59 | });
60 |
61 | test('first and rest should be visible when first="pip" rest="pip"', async ({ page }) => {
62 | const slider = page.locator('#first-rest-pips');
63 | const firstPip = slider.locator('.rsPip--first');
64 | const lastPip = slider.locator('.rsPip--last');
65 | const restPips = slider.locator('.rsPip:not(.rsPip--first):not(.rsPip--last)');
66 |
67 | // First and rest should be visible
68 | await expect(firstPip).toBeVisible();
69 | await expect(lastPip).toHaveCount(0);
70 | await expect(restPips).toHaveCount(19);
71 | });
72 |
73 | test('last and rest should be visible when last="pip" rest="pip"', async ({ page }) => {
74 | const slider = page.locator('#last-rest-pips');
75 | const firstPip = slider.locator('.rsPip--first');
76 | const lastPip = slider.locator('.rsPip--last');
77 | const restPips = slider.locator('.rsPip:not(.rsPip--first):not(.rsPip--last)');
78 |
79 | // Last and rest should be visible
80 | await expect(firstPip).toHaveCount(0);
81 | await expect(lastPip).toBeVisible();
82 | await expect(restPips).toHaveCount(19);
83 | });
84 |
85 | test('no pips should be visible when all={false}', async ({ page }) => {
86 | const slider = page.locator('#no-pips');
87 | const pips = slider.locator('.rsPip');
88 |
89 | // No pips should be visible
90 | await expect(pips).toHaveCount(0);
91 | });
92 |
93 | test('no pips should be visible when first={false} last={false} rest={false}', async ({ page }) => {
94 | const slider = page.locator('#no-pips-explicit');
95 | const pips = slider.locator('.rsPip');
96 |
97 | // No pips should be visible
98 | await expect(pips).toHaveCount(0);
99 | });
100 | });
101 |
--------------------------------------------------------------------------------
/tests/playwright/RangeSlider._.spec.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from '@playwright/test';
2 |
3 | test.describe('Basic Tests', () => {
4 | test.describe('no props', () => {
5 | test('should render correctly', async ({ page }) => {
6 | await page.goto('/test/range-slider/base');
7 | await page.waitForLoadState('networkidle');
8 |
9 | // Check component exists
10 | await expect(page.locator('.rangeSlider')).toBeVisible();
11 | await expect(page.locator('.rangeHandle')).toBeVisible();
12 | await expect(page.locator('.rangeNub')).toBeVisible();
13 | });
14 |
15 | test('should have correct attributes', async ({ page }) => {
16 | await page.goto('/test/range-slider/base');
17 | await page.waitForLoadState('networkidle');
18 | const slider = page.locator('.rangeSlider');
19 | const handle = page.locator('.rangeHandle');
20 |
21 | // Check role
22 | await expect(slider).toHaveAttribute('role', 'none');
23 | await expect(handle).toHaveAttribute('role', 'slider');
24 |
25 | // Check min/max/value
26 | await expect(handle, 'to have min of 0').toHaveAttribute('aria-valuemin', '0');
27 | await expect(handle, 'to have max of 100').toHaveAttribute('aria-valuemax', '100');
28 | await expect(handle, 'to have value of 50').toHaveAttribute('aria-valuenow', '50');
29 | await expect(handle, 'to have value of 50').toHaveAttribute('aria-valuetext', '50');
30 | await expect(handle, 'to be positioned at 50%').toHaveCSS('translate', '500px');
31 |
32 | // Check orientation and disabled state
33 | await expect(handle).toHaveAttribute('data-handle', '0');
34 | await expect(handle).toHaveAttribute('aria-orientation', 'horizontal');
35 | await expect(handle).toHaveAttribute('aria-disabled', 'false');
36 | await expect(handle).toHaveAttribute('tabindex', '0');
37 |
38 | // check classes
39 | await expect(slider).toHaveClass(/\brsHoverable\b/);
40 | await expect(slider).not.toHaveClass(/\brsMin\b/);
41 | await expect(slider).not.toHaveClass(/\brsMax\b/);
42 | await expect(slider).not.toHaveClass(/\brsRange\b/);
43 | await expect(slider).not.toHaveClass(/\brsDrag\b/);
44 | await expect(slider).not.toHaveClass(/\brsDisabled\b/);
45 | await expect(slider).not.toHaveClass(/\brsVertical\b/);
46 | await expect(slider).not.toHaveClass(/\brsReversed\b/);
47 | await expect(slider).not.toHaveClass(/\brsFocus\b/);
48 | await expect(slider).not.toHaveClass(/\brsPips\b/);
49 | });
50 | });
51 | });
52 |
--------------------------------------------------------------------------------
/tests/playwright/RangeSlider.darkmode.spec.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from '@playwright/test';
2 | import type { Page } from '@playwright/test';
3 |
4 | const SLIDER_IDS = {
5 | light: '#slider-light',
6 | auto: '#slider-auto',
7 | dark: '#slider-dark'
8 | };
9 |
10 | // These are the expected RGB colors from the CSS variables in RangeSlider.svelte
11 | const COLORS = {
12 | light: {
13 | slider: 'rgb(215, 218, 218)', // --slider-bg
14 | handle: 'rgb(153, 162, 162)' // --slider-base
15 | },
16 | dark: {
17 | slider: 'rgb(63, 62, 79)', // --slider-dark-bg
18 | handle: 'rgb(130, 128, 159)' // --slider-dark-base
19 | }
20 | };
21 |
22 | test.describe('RangeSlider darkmode property', () => {
23 | test.beforeEach(async ({ page }) => {
24 | await page.goto('/test/range-slider/styles/darkmode');
25 | await page.waitForLoadState('networkidle');
26 | });
27 |
28 | test('should apply light mode (darkmode=false)', async ({ page }) => {
29 | const slider = page.locator(SLIDER_IDS.light);
30 | const sliderHandle = page.locator(`${SLIDER_IDS.light} .rangeHandle .rangeNub`);
31 | await expect(slider).not.toHaveClass(/\brsDark\b/);
32 | await expect(slider).not.toHaveClass(/\brsAutoDark\b/);
33 | await expect(slider).toHaveCSS('background-color', COLORS.light.slider);
34 | await expect(sliderHandle).toHaveCSS('background-color', COLORS.light.handle);
35 | });
36 |
37 | test('should apply forced dark mode (darkmode="force")', async ({ page }) => {
38 | const slider = page.locator(SLIDER_IDS.dark);
39 | const sliderHandle = page.locator(`${SLIDER_IDS.dark} .rangeHandle .rangeNub`);
40 | await expect(slider).toHaveClass(/\brsDark\b/);
41 | await expect(slider).not.toHaveClass(/\brsAutoDark\b/);
42 | await expect(slider).toHaveCSS('background-color', COLORS.dark.slider);
43 | await expect(sliderHandle).toHaveCSS('background-color', COLORS.dark.handle);
44 | });
45 |
46 | test.describe('darkmode={false} ignores system color scheme', () => {
47 | for (const scheme of ['light', 'dark'] as const) {
48 | test(`should always use light colors when system is ${scheme}`, async ({ page }) => {
49 | await page.emulateMedia({ colorScheme: scheme });
50 | await page.reload();
51 | const slider = page.locator('#slider-light');
52 | const handle = page.locator('#slider-light .rangeHandle .rangeNub');
53 | await expect(slider).not.toHaveClass(/\brsDark\b/);
54 | await expect(slider).not.toHaveClass(/\brsAutoDark\b/);
55 | await expect(slider).toHaveCSS('background-color', COLORS.light.slider);
56 | await expect(handle).toHaveCSS('background-color', COLORS.light.handle);
57 | });
58 | }
59 | });
60 |
61 | test.describe('darkmode="force" ignores system color scheme', () => {
62 | for (const scheme of ['light', 'dark'] as const) {
63 | test(`should always use dark colors when system is ${scheme}`, async ({ page }) => {
64 | await page.emulateMedia({ colorScheme: scheme });
65 | await page.reload();
66 | const slider = page.locator('#slider-dark');
67 | const handle = page.locator('#slider-dark .rangeHandle .rangeNub');
68 | await expect(slider).toHaveClass(/\brsDark\b/);
69 | await expect(slider).not.toHaveClass(/\brsAutoDark\b/);
70 | await expect(slider).toHaveCSS('background-color', COLORS.dark.slider);
71 | await expect(handle).toHaveCSS('background-color', COLORS.dark.handle);
72 | });
73 | }
74 | });
75 |
76 | test.describe('darkmode="auto" responds to system color scheme', () => {
77 | test('should use light colors when system is light', async ({ page, context }) => {
78 | await context.setExtraHTTPHeaders({ 'Accept-CH': 'Sec-CH-Prefers-Color-Scheme' });
79 | await page.emulateMedia({ colorScheme: 'light' });
80 | await page.reload();
81 | const slider = page.locator(SLIDER_IDS.auto);
82 | const sliderHandle = page.locator(`${SLIDER_IDS.auto} .rangeHandle .rangeNub`);
83 | await expect(slider).toHaveClass(/\brsAutoDark\b/);
84 | await expect(slider).toHaveCSS('background-color', COLORS.light.slider);
85 | await expect(sliderHandle).toHaveCSS('background-color', COLORS.light.handle);
86 | });
87 | test('should use dark colors when system is dark', async ({ page, context }) => {
88 | await context.setExtraHTTPHeaders({ 'Accept-CH': 'Sec-CH-Prefers-Color-Scheme' });
89 | await page.emulateMedia({ colorScheme: 'dark' });
90 | await page.reload();
91 | const slider = page.locator(SLIDER_IDS.auto);
92 | const sliderHandle = page.locator(`${SLIDER_IDS.auto} .rangeHandle .rangeNub`);
93 | await expect(slider).toHaveClass(/\brsAutoDark\b/);
94 | await expect(slider).toHaveCSS('background-color', COLORS.dark.slider);
95 | await expect(sliderHandle).toHaveCSS('background-color', COLORS.dark.handle);
96 | });
97 | });
98 | });
99 |
--------------------------------------------------------------------------------
/tests/playwright/RangeSlider.interaction.spec.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from '@playwright/test';
2 | import { dragHandleTo } from './helpers/tools.js';
3 |
4 | test.describe('Interactions', () => {
5 | test('has focus when clicked', async ({ page }) => {
6 | await page.goto('/test/range-slider/values/single-value');
7 | await page.waitForLoadState('networkidle');
8 | const slider = page.locator('.rangeSlider').nth(0);
9 | const handle = slider.getByRole('slider');
10 |
11 | await slider.isVisible();
12 | await handle.isVisible();
13 | await handle.focus();
14 | await expect(slider).toHaveClass(/\brsFocus\b/);
15 | await expect(handle).toHaveClass(/\brsActive\b/);
16 | });
17 |
18 | test('should handle mouse clicks on range', async ({ page }) => {
19 | await page.goto('/test/range-slider/values/single-value');
20 | await page.waitForLoadState('networkidle');
21 | const slider = page.locator('.rangeSlider').nth(0);
22 | const handle = slider.getByRole('slider');
23 |
24 | await slider.isVisible();
25 | const sliderBounds = await slider.boundingBox();
26 | if (!sliderBounds) throw new Error('Could not get slider bounds');
27 |
28 | await page.mouse.click(
29 | sliderBounds.x + sliderBounds.width * 0.1, // Click at 10% from left
30 | sliderBounds.y + sliderBounds.height / 2
31 | );
32 |
33 | await expect(handle).toHaveAttribute('aria-valuenow', '10');
34 | await expect(handle, 'to be positioned at 10%').toHaveCSS('translate', '100px');
35 | });
36 |
37 | test('should handle drag handle operations', async ({ page }) => {
38 | await page.goto('/test/range-slider/values/binding/single');
39 | await page.waitForLoadState('networkidle');
40 | const slider = page.locator('.rangeSlider').nth(0);
41 | const handle = slider.getByRole('slider');
42 | const input = page.getByLabel('Current value:');
43 |
44 | await slider.isVisible();
45 | const sliderBounds = await slider.boundingBox();
46 | if (!sliderBounds) throw new Error('Could not get slider bounds');
47 |
48 | // Drag the handle to 75%
49 | await dragHandleTo(page, slider, handle, 0.75);
50 |
51 | // Verify the handle and input value
52 | await expect(handle).toHaveAttribute('aria-valuenow', '75');
53 | await expect(handle, 'to be positioned at 75%').toHaveCSS('translate', '750px');
54 | await expect(input).toHaveValue('75');
55 | });
56 |
57 | test('should update handle position when dragging', async ({ page }) => {
58 | await page.goto('/test/range-slider/values/binding/single');
59 | await page.waitForLoadState('networkidle');
60 | const slider = page.locator('.rangeSlider').nth(0);
61 | const handle = slider.getByRole('slider');
62 | const input = page.getByLabel('Current value:');
63 |
64 | await slider.isVisible();
65 | const sliderBounds = await slider.boundingBox();
66 | if (!sliderBounds) throw new Error('Could not get slider bounds');
67 |
68 | // Drag the handle to 50%
69 | await dragHandleTo(page, slider, handle, 0.5);
70 |
71 | // Verify the handle and input value
72 | await expect(handle).toHaveAttribute('aria-valuenow', '50');
73 | await expect(handle, 'to be positioned at 50%').toHaveCSS('translate', '500px');
74 | await expect(input).toHaveValue('50');
75 | });
76 | });
77 |
--------------------------------------------------------------------------------
/tests/playwright/RangeSlider.reversed.spec.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from '@playwright/test';
2 |
3 | test.describe('Reversed Slider Tests', () => {
4 | test.describe('single handle', () => {
5 | test('should render correctly with default min/max', async ({ page }) => {
6 | await page.goto('/test/range-slider/states/reversed');
7 | await page.waitForLoadState('networkidle');
8 | const slider = page.locator('.rangeSlider').nth(0);
9 | const handle = slider.getByRole('slider');
10 |
11 | // Check component exists
12 | await expect(slider).toBeAttached();
13 | await expect(handle).toBeAttached();
14 | await expect(slider).toHaveClass(/\brsReversed\b/);
15 |
16 | // Value of 75 on reversed slider should position from right
17 | await expect(handle).toHaveAttribute('aria-valuenow', '75');
18 | await expect(handle).toHaveCSS('translate', '250px');
19 | });
20 |
21 | test('should handle custom min/max values', async ({ page }) => {
22 | await page.goto('/test/range-slider/states/reversed');
23 | await page.waitForLoadState('networkidle');
24 | const slider = page.locator('.rangeSlider').nth(1);
25 | const handle = slider.getByRole('slider');
26 |
27 | // Check min/max/value
28 | await expect(handle).toHaveAttribute('aria-valuemin', '-100');
29 | await expect(handle).toHaveAttribute('aria-valuemax', '150');
30 | await expect(handle).toHaveAttribute('aria-valuenow', '125');
31 |
32 | // 125 on -100 to 150 range is 90% from right
33 | await expect(handle).toHaveCSS('translate', '100px');
34 | });
35 |
36 | test('should handle mouse interactions correctly', async ({ page }) => {
37 | await page.goto('/test/range-slider/states/reversed');
38 | await page.waitForLoadState('networkidle');
39 | const slider = page.locator('.rangeSlider').nth(0);
40 | const handle = slider.getByRole('slider');
41 |
42 | await slider.isVisible();
43 | const sliderBounds = await slider.boundingBox();
44 | if (!sliderBounds) throw new Error('Could not get slider bounds');
45 |
46 | // Click at 10% from left should set value to 90
47 | await page.mouse.click(
48 | sliderBounds.x + sliderBounds.width * 0.1, // Click at 10% from left
49 | sliderBounds.y + sliderBounds.height / 2
50 | );
51 | // Verify the handle and input value
52 | await expect(handle).toHaveAttribute('aria-valuenow', '90');
53 | await expect(handle).toHaveCSS('translate', '100px');
54 | });
55 | });
56 |
57 | test.describe('range slider', () => {
58 | test('should render correctly with two handles', async ({ page }) => {
59 | await page.goto('/test/range-slider/states/reversed');
60 | await page.waitForLoadState('networkidle');
61 | const slider = page.locator('.rangeSlider').nth(2);
62 | const handles = slider.locator('.rangeHandle');
63 |
64 | await slider.isVisible();
65 |
66 | // First handle should be at 25% from right
67 | await expect(handles.nth(0)).toHaveAttribute('aria-valuenow', '0');
68 | await expect(handles.nth(0)).toHaveCSS('translate', '1000px');
69 | // Second handle should be at 75% from right
70 | await expect(handles.nth(1)).toHaveAttribute('aria-valuenow', '100');
71 | await expect(handles.nth(1)).toHaveCSS('translate', '0px');
72 | // Range bar should span between handles
73 | const rangeBar = page.locator('.rangeBar');
74 | await expect(rangeBar).toHaveCSS('translate', '0px');
75 | await expect(rangeBar).toHaveCSS('width', '1000px');
76 | });
77 |
78 | test('click at 10% should move the second handle to 90', async ({ page }) => {
79 | await page.goto('/test/range-slider/states/reversed');
80 | await page.waitForLoadState('networkidle');
81 | const slider = page.locator('.rangeSlider').nth(2);
82 | const handles = slider.locator('.rangeHandle');
83 |
84 | await slider.isVisible();
85 |
86 | // First handle should be at 25% from right
87 | await expect(handles.nth(0)).toHaveAttribute('aria-valuenow', '0');
88 | await expect(handles.nth(0)).toHaveCSS('translate', '1000px');
89 | // Second handle should be at 75% from right
90 | await expect(handles.nth(1)).toHaveAttribute('aria-valuenow', '100');
91 | await expect(handles.nth(1)).toHaveCSS('translate', '0px');
92 |
93 | // First handle should not be able to go beyond second handle
94 | const sliderBounds = await slider.boundingBox();
95 | if (!sliderBounds) throw new Error('Could not get slider bounds');
96 |
97 | // click at 10% should move the second handle to 90
98 | await page.mouse.click(sliderBounds.x + sliderBounds.width * 0.1, sliderBounds.y + sliderBounds.height / 2);
99 |
100 | // click at 90% should move the first handle to 10
101 | await page.mouse.click(sliderBounds.x + sliderBounds.width * 0.9, sliderBounds.y + sliderBounds.height / 2);
102 |
103 | // Handles should maintain their order
104 | await expect(handles.nth(0)).toHaveAttribute('aria-valuenow', '10');
105 | await expect(handles.nth(1)).toHaveAttribute('aria-valuenow', '90');
106 | await expect(handles.nth(0)).toHaveCSS('translate', '900px');
107 | await expect(handles.nth(1)).toHaveCSS('translate', '100px');
108 | // Range bar should span between handles
109 | const rangeBar = page.locator('.rangeBar');
110 | await expect(rangeBar).toHaveCSS('translate', '100px');
111 | await expect(rangeBar).toHaveCSS('width', '800px');
112 | });
113 | });
114 |
115 | test.describe('keyboard interaction', () => {
116 | test('should handle arrow keys correctly in reversed mode', async ({ page }) => {
117 | await page.goto('/test/range-slider/states/reversed');
118 | await page.waitForLoadState('networkidle');
119 | const slider = page.locator('.rangeSlider').nth(0);
120 | const handle = slider.getByRole('slider');
121 |
122 | // Initial value is 75
123 | await expect(handle).toHaveAttribute('aria-valuenow', '75');
124 |
125 | // arrow keys should be unaffected in reversed mode
126 | await handle.focus();
127 | await page.keyboard.press('ArrowRight');
128 | await expect(handle).toHaveAttribute('aria-valuenow', '76');
129 |
130 | // Left arrow should increase value in reversed mode
131 | await handle.focus();
132 | await page.keyboard.press('ArrowLeft');
133 | await page.keyboard.press('ArrowLeft');
134 | await expect(handle).toHaveAttribute('aria-valuenow', '74');
135 | });
136 |
137 | test('should handle arrow keys correctly in reversed range mode', async ({ page }) => {
138 | await page.goto('/test/range-slider/states/reversed');
139 | await page.waitForLoadState('networkidle');
140 | const slider = page.locator('.rangeSlider').nth(2);
141 | const handles = slider.getByRole('slider');
142 |
143 | // Initial values are 0 and 100
144 | await expect(handles.nth(0)).toHaveAttribute('aria-valuenow', '0');
145 | await expect(handles.nth(1)).toHaveAttribute('aria-valuenow', '100');
146 |
147 | // First handle: right arrow should decrease value in reversed mode
148 | await handles.nth(0).focus();
149 | await page.keyboard.press('ArrowRight');
150 | await expect(handles.nth(0)).toHaveAttribute('aria-valuenow', '1');
151 |
152 | // First handle: left arrow should not allow value to go below 0
153 | await handles.nth(0).focus();
154 | await page.keyboard.press('ArrowLeft');
155 | await expect(handles.nth(0)).toHaveAttribute('aria-valuenow', '0');
156 | for (let i = 0; i < 5; i++) await page.keyboard.press('ArrowRight');
157 | await expect(handles.nth(0)).toHaveAttribute('aria-valuenow', '5');
158 |
159 | // Second handle: right arrow should not allow value to go above 100
160 | await handles.nth(1).focus();
161 | await page.keyboard.press('ArrowRight');
162 | await expect(handles.nth(1)).toHaveAttribute('aria-valuenow', '100');
163 | for (let i = 0; i < 5; i++) await page.keyboard.press('ArrowLeft');
164 | await expect(handles.nth(1)).toHaveAttribute('aria-valuenow', '95');
165 |
166 | // Second handle: left arrow should decrease value but not below first handle
167 | await handles.nth(1).focus();
168 | for (let i = 0; i < 100; i++) await page.keyboard.press('ArrowLeft');
169 | await expect(handles.nth(1)).toHaveAttribute('aria-valuenow', '5');
170 | });
171 | });
172 | });
173 |
--------------------------------------------------------------------------------
/tests/playwright/RangeSlider.values.spec.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from '@playwright/test';
2 | import { waitTime } from './helpers/utils.js';
3 |
4 | test.describe('Values Tests', () => {
5 | test('single value set to: 75', async ({ page }) => {
6 | await page.goto('/test/range-slider/values/single-value');
7 | await page.waitForLoadState('networkidle');
8 | const handle = page.getByRole('slider');
9 |
10 | await expect(handle).toHaveAttribute('aria-valuenow', '75');
11 | await expect(handle, 'to be positioned at 75%').toHaveCSS('translate', '750px');
12 | });
13 |
14 | test('multiple handles set to: [25, 125]', async ({ page }) => {
15 | await page.goto('/test/range-slider/values/multiple-values');
16 | await page.waitForLoadState('networkidle');
17 | const handles = page.getByRole('slider');
18 |
19 | // Check count of handles
20 | await expect(handles).toHaveCount(2);
21 |
22 | // First handle: 25
23 | await expect(handles.nth(0)).toHaveAttribute('aria-valuenow', '25');
24 | await expect(handles.nth(0), 'handle should be positioned at 25%').toHaveCSS('translate', '250px');
25 |
26 | // Second handle: 125
27 | // should be constrained to max=100
28 | await expect(handles.nth(1)).toHaveAttribute('aria-valuenow', '100');
29 | await expect(handles.nth(1), 'handle should be positioned at 100%').toHaveCSS('translate', '1000px');
30 | });
31 |
32 | test('seven handles set to: [10, 20, 30, 40, 60, 80, 90]', async ({ page }) => {
33 | await page.goto('/test/range-slider/values/seven-values');
34 | await page.waitForLoadState('networkidle');
35 | const handles = page.getByRole('slider');
36 |
37 | const expectedValues = [10, 20, 30, 40, 60, 80, 90];
38 |
39 | // Check count of handles
40 | await expect(handles).toHaveCount(7);
41 |
42 | // Check each handle's value
43 | for (let i = 0; i < expectedValues.length; i++) {
44 | await expect(handles.nth(i)).toHaveAttribute('aria-valuenow', expectedValues[i].toString());
45 | await expect(handles.nth(i), `handle ${i} should be positioned at ${expectedValues[i]}%`).toHaveCSS(
46 | 'translate',
47 | `${expectedValues[i] * 10}px`
48 | );
49 | }
50 | });
51 |
52 | test('values outside default min/max are constrained: [-20, 120] -> [0, 100]', async ({ page }) => {
53 | await page.goto('/test/range-slider/values/constrained-values');
54 | await page.waitForLoadState('networkidle');
55 | const handles = page.getByRole('slider');
56 |
57 | // Check count of handles
58 | await expect(handles).toHaveCount(2);
59 |
60 | // First handle should be constrained to min=0
61 | await expect(handles.nth(0)).toHaveAttribute('aria-valuenow', '0');
62 | await expect(handles.nth(0), 'handle should be positioned at 0%').toHaveCSS('translate', '0px');
63 |
64 | // Second handle should be constrained to max=100
65 | await expect(handles.nth(1)).toHaveAttribute('aria-valuenow', '100');
66 | await expect(handles.nth(1), 'handle should be positioned at 100%').toHaveCSS('translate', '1000px');
67 | });
68 |
69 | test('when both value/values props provided, value[0] = value, value[1] = values[1]', async ({ page }) => {
70 | await page.goto('/test/range-slider/values/value-values');
71 | await page.waitForLoadState('networkidle');
72 | const handles = page.getByRole('slider');
73 |
74 | // Should have two handles since both value and values props are provided
75 | await expect(handles).toHaveCount(2);
76 |
77 | // Handle 1 should be set to value (75)
78 | await expect(handles.nth(0)).toHaveAttribute('aria-valuenow', '75');
79 | await expect(handles.nth(0), 'handle should be positioned at 75%').toHaveCSS('translate', '750px');
80 |
81 | // Handle 2 should be set to values[1] (90)
82 | await expect(handles.nth(1)).toHaveAttribute('aria-valuenow', '90');
83 | await expect(handles.nth(1), 'handle should be positioned at 90%').toHaveCSS('translate', '900px');
84 | });
85 |
86 | test('two-way binding works between slider and number input', async ({ page }) => {
87 | await page.goto('/test/range-slider/values/binding/single');
88 | await page.waitForLoadState('networkidle');
89 | const handle = page.getByRole('slider');
90 | const input = page.getByLabel('Current value:');
91 | const v = '55';
92 |
93 | // Test input -> slider binding
94 | await input.focus();
95 | await input.fill(v);
96 | await input.blur();
97 | await expect(input).toHaveValue(v);
98 | await expect(handle).toHaveAttribute('aria-valuenow', v);
99 | await expect(handle, 'handle should be positioned at 55%').toHaveCSS('translate', '550px');
100 |
101 | // Test slider -> input binding
102 | await handle.focus();
103 | await page.keyboard.press('ArrowRight'); // Move to 56
104 | await expect(input).toHaveValue((parseInt(v) + 1).toString());
105 | });
106 |
107 | test('input values are constrained to min/max bounds', async ({ page }) => {
108 | await page.goto('/test/range-slider/values/binding/single');
109 | await page.waitForLoadState('networkidle');
110 | const handle = page.getByRole('slider');
111 | const input = page.getByLabel('Current value:');
112 |
113 | // Test value below minimum
114 | await input.focus();
115 | await input.fill('-10');
116 | await input.blur();
117 | await expect(input).toHaveValue('0');
118 | await expect(handle).toHaveAttribute('aria-valuenow', '0');
119 | await expect(handle, 'handle should be positioned at 0%').toHaveCSS('translate', '0px');
120 |
121 | // Test value above maximum
122 | await input.focus();
123 | await input.fill('150');
124 | await input.blur();
125 | await expect(input).toHaveValue('100');
126 | await expect(handle).toHaveAttribute('aria-valuenow', '100');
127 | await expect(handle, 'handle should be positioned at 100%').toHaveCSS('translate', '1000px');
128 | });
129 |
130 | test('two-way binding works between slider and number inputs (multiple values)', async ({ page }) => {
131 | await page.goto('/test/range-slider/values/binding/multiple');
132 | await page.waitForLoadState('networkidle');
133 | const handles = page.getByRole('slider');
134 | const input1 = page.getByLabel('First value:');
135 | const input2 = page.getByLabel('Second value:');
136 |
137 | // Test inputs -> slider binding
138 | // Update first handle
139 | await input1.focus();
140 | await input1.fill('30');
141 | await input1.blur();
142 | await expect(input1).toHaveValue('30');
143 | await expect(handles.nth(0)).toHaveAttribute('aria-valuenow', '30');
144 | await expect(handles.nth(0), 'first handle should be positioned at 30%').toHaveCSS('translate', '300px');
145 |
146 | // Update second handle
147 | await input2.focus();
148 | await input2.fill('80');
149 | await input2.blur();
150 | await expect(input2).toHaveValue('80');
151 | await expect(handles.nth(1)).toHaveAttribute('aria-valuenow', '80');
152 | await expect(handles.nth(1), 'second handle should be positioned at 80%').toHaveCSS('translate', '800px');
153 |
154 | // Test slider -> inputs binding
155 | // Move first handle
156 | await handles.nth(0).focus();
157 | await page.keyboard.press('ArrowRight'); // Move to 31
158 | await expect(input1).toHaveValue('31');
159 |
160 | // Move second handle
161 | await handles.nth(1).focus();
162 | await page.keyboard.press('ArrowLeft'); // Move to 79
163 | await expect(input2).toHaveValue('79');
164 | });
165 | });
166 |
--------------------------------------------------------------------------------
/tests/playwright/helpers/tools.ts:
--------------------------------------------------------------------------------
1 | import type { Locator, Page } from '@playwright/test';
2 |
3 | /**
4 | * Drag a handle to a specific position
5 | * @param page - The page object
6 | * @param slider - The slider locator
7 | * @param handle - The handle locator
8 | * @param pos - The position (0-1) to drag the handle to
9 | * @param vertical - Whether to use y-coordinates (true) or x-coordinates (false)
10 | */
11 | export const dragHandleTo = async (
12 | page: Page,
13 | slider: Locator,
14 | handle: Locator,
15 | pos: number,
16 | vertical: boolean = false
17 | ) => {
18 | await slider.scrollIntoViewIfNeeded();
19 |
20 | const sbox = await slider.boundingBox();
21 | if (!sbox) throw new Error('Could not get slider bounds');
22 |
23 | await handle.focus();
24 | const hbox = await handle.boundingBox();
25 | if (!hbox) throw new Error('Could not get handle bounds');
26 | const handleCenter = { x: hbox.x + hbox.width / 2, y: hbox.y + hbox.height / 2 };
27 |
28 | // Move mouse to handle center and press down
29 | await page.mouse.move(handleCenter.x, handleCenter.y);
30 | await page.mouse.down();
31 |
32 | // Calculate target position based on orientation
33 | const targetX = vertical ? sbox.x + sbox.width / 2 : sbox.x + sbox.width * pos;
34 | const targetY = vertical ? sbox.y + sbox.height * pos : sbox.y + sbox.height / 2;
35 |
36 | // Ensure we end exactly at target position
37 | await page.mouse.move(targetX, targetY, { steps: 25 });
38 | await page.waitForTimeout(100);
39 | await page.mouse.up();
40 | };
41 |
--------------------------------------------------------------------------------
/tests/playwright/helpers/utils.ts:
--------------------------------------------------------------------------------
1 | export const waitTime = 400;
2 |
3 | export const $ = (selector: string, root: Element | Document = document) => root.querySelector(selector);
4 | export const $$ = (selector: string, root: Element | Document = document) => root.querySelectorAll(selector);
5 |
--------------------------------------------------------------------------------
/tests/reactjs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "svelte-range-slider-react-test",
3 | "version": "0.0.0",
4 | "private": true,
5 | "dependencies": {
6 | "react": "^18.1.0",
7 | "react-dom": "^18.1.0",
8 | "svelte-range-slider-pips": "file:../.."
9 | },
10 | "type": "module",
11 | "scripts": {
12 | "dev": "react-scripts start",
13 | "start": "react-scripts start",
14 | "build": "react-scripts build",
15 | "test": "react-scripts test --env=jsdom",
16 | "eject": "react-scripts eject"
17 | },
18 | "devDependencies": {
19 | "@types/react": "^18.3.4",
20 | "react-scripts": "latest"
21 | },
22 | "browserslist": {
23 | "production": [
24 | ">0.2%",
25 | "not dead",
26 | "not op_mini all"
27 | ],
28 | "development": [
29 | "last 1 chrome version",
30 | "last 1 firefox version",
31 | "last 1 safari version"
32 | ]
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/tests/reactjs/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/tests/reactjs/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useRef } from 'react';
2 | import RangeSlider from 'svelte-range-slider-pips';
3 | // import type { ComponentProps } from 'svelte';
4 | // import type { RangeSlider as RangeSliderType } from 'svelte-range-slider-pips';
5 |
6 | export default function MyComponent() {
7 | const [values, setValues] = useState([-7, 7]);
8 | const MySlider = useRef();
9 | const $node = useRef();
10 |
11 | useEffect(() => {
12 | if (!MySlider.current) {
13 | MySlider.current = new RangeSlider({
14 | target: $node.current,
15 | props: {
16 | values: values,
17 | pips: true,
18 | first: 'label',
19 | last: 'label',
20 | range: true,
21 | min: -10,
22 | max: 10
23 | }
24 | });
25 | MySlider.current.$on('change', (e) => {
26 | setValues(e.detail.values);
27 | });
28 | }
29 | }, []);
30 |
31 | function handleClick() {
32 | const newVals = values.map((v) => v + 10);
33 | setValues(newVals);
34 | MySlider.current.$set({ values: newVals });
35 | }
36 |
37 | return (
38 |
39 |
{values.join(',')}
40 |
41 |
Add 10
42 |
11 |
13 | );
14 |
--------------------------------------------------------------------------------
/tests/setupTest.js:
--------------------------------------------------------------------------------
1 | import * as matchers from '@testing-library/jest-dom/matchers';
2 | import { expect, vi } from 'vitest';
3 |
4 | expect.extend(matchers);
5 |
--------------------------------------------------------------------------------
/tests/svelte4/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/tests/svelte4/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | "recommendations": ["svelte.svelte-vscode"]
3 | }
4 |
--------------------------------------------------------------------------------
/tests/svelte4/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Vite + Svelte
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/tests/svelte4/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "moduleResolution": "bundler",
4 | "target": "ESNext",
5 | "module": "ESNext",
6 | /**
7 | * svelte-preprocess cannot figure out whether you have
8 | * a value or a type, so tell TypeScript to enforce using
9 | * `import type` instead of `import` for Types.
10 | */
11 | "verbatimModuleSyntax": true,
12 | "isolatedModules": true,
13 | "resolveJsonModule": true,
14 | /**
15 | * To have warnings / errors of the Svelte compiler at the
16 | * correct position, enable source maps by default.
17 | */
18 | "sourceMap": true,
19 | "esModuleInterop": true,
20 | "skipLibCheck": true,
21 | /**
22 | * Typecheck JS in `.svelte` and `.js` files by default.
23 | * Disable this if you'd like to use dynamic types.
24 | */
25 | "checkJs": true
26 | },
27 | /**
28 | * Use global.d.ts instead of compilerOptions.types
29 | * to avoid limiting type declarations.
30 | */
31 | "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
32 | }
33 |
--------------------------------------------------------------------------------
/tests/svelte4/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "svelte-test",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite dev --host",
8 | "build": "vite build",
9 | "preview": "vite preview"
10 | },
11 | "devDependencies": {
12 | "@sveltejs/vite-plugin-svelte": "^3.0.1",
13 | "svelte": "^4.2.8",
14 | "vite": "^5.0.8",
15 | "svelte-range-slider-pips": "file:../.."
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/tests/svelte4/public/vite.svg:
--------------------------------------------------------------------------------
1 |
11 |
19 | Vite + Svelte
20 |
21 |
22 |
24 |
25 | console.log('start')}
33 | on:stop={() => console.log('stop')}
34 | on:change={({ detail }) => console.log('change', detail)}
35 | />
36 |
37 | {values}
38 |
39 |
40 |
57 |
--------------------------------------------------------------------------------
/tests/svelte4/src/app.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3 | line-height: 1.5;
4 | font-weight: 400;
5 |
6 | color-scheme: light dark;
7 | color: rgba(255, 255, 255, 0.87);
8 | background-color: #242424;
9 |
10 | font-synthesis: none;
11 | text-rendering: optimizeLegibility;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | }
15 |
16 | a {
17 | font-weight: 500;
18 | color: #646cff;
19 | text-decoration: inherit;
20 | }
21 | a:hover {
22 | color: #535bf2;
23 | }
24 |
25 | body {
26 | margin: 0;
27 | display: flex;
28 | place-items: center;
29 | min-width: 320px;
30 | min-height: 100vh;
31 | }
32 |
33 | h1 {
34 | font-size: 3.2em;
35 | line-height: 1.1;
36 | }
37 |
38 | .card {
39 | padding: 2em;
40 | }
41 |
42 | #app {
43 | max-width: 1280px;
44 | margin: 0 auto;
45 | padding: 2rem;
46 | text-align: center;
47 | }
48 |
49 | button {
50 | border-radius: 8px;
51 | border: 1px solid transparent;
52 | padding: 0.6em 1.2em;
53 | font-size: 1em;
54 | font-weight: 500;
55 | font-family: inherit;
56 | background-color: #1a1a1a;
57 | cursor: pointer;
58 | transition: border-color 0.25s;
59 | }
60 | button:hover {
61 | border-color: #646cff;
62 | }
63 | button:focus,
64 | button:focus-visible {
65 | outline: 4px auto -webkit-focus-ring-color;
66 | }
67 |
68 | @media (prefers-color-scheme: light) {
69 | :root {
70 | color: #213547;
71 | background-color: #ffffff;
72 | }
73 | a:hover {
74 | color: #747bff;
75 | }
76 | button {
77 | background-color: #f9f9f9;
78 | }
79 | }
80 |
--------------------------------------------------------------------------------
/tests/svelte4/src/assets/svelte.svg:
--------------------------------------------------------------------------------
1 |
10 | count is {values[0]} + {values[1]} = {values[0] + values[1]}
11 |
12 |
--------------------------------------------------------------------------------
/tests/svelte4/src/main.js:
--------------------------------------------------------------------------------
1 | import './app.css';
2 | import App from './App.svelte';
3 |
4 | const app = new App({
5 | target: document.getElementById('app')
6 | });
7 |
8 | export default app;
9 |
--------------------------------------------------------------------------------
/tests/svelte4/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// %sveltekit.body%
11 |
12 |
13 |
--------------------------------------------------------------------------------
/tests/svelte5/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | // place files you want to import through the `$lib` alias in this folder.
2 |
--------------------------------------------------------------------------------
/tests/svelte5/src/routes/+page.svelte:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/tests/svelte5/src/routes/regular/+page.svelte:
--------------------------------------------------------------------------------
1 | Without Runes
10 |
11 | value++}> add value
12 |
13 | {value}
14 | console.log('start')}
21 | on:stop={() => console.log('stop')}
22 | on:change={({ detail }) => console.log('change', detail)}
23 | />
24 |
25 | {values}
26 | With Runes
10 |
11 | value++}> add value
12 |
13 | {value}
14 | console.log('start')}
21 | on:stop={() => console.log('stop')}
22 | on:change={({ detail }) => console.log('change', detail)}
23 | />
24 |
25 | {values}
26 | test
7 | Testing loading JS (esm) script
38 |
39 | -7,7
40 |
41 |
42 |
--------------------------------------------------------------------------------
/tests/vanilla/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | test
7 | test
7 | Testing loading JS (umd) script
38 |
39 | -7,7
40 |
41 |
42 |
--------------------------------------------------------------------------------
/tests/vuejs/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-ssr
14 | coverage
15 | *.local
16 |
17 | /cypress/videos/
18 | /cypress/screenshots/
19 |
20 | # Editor directories and files
21 | .vscode/*
22 | !.vscode/extensions.json
23 | .idea
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw?
29 |
30 | *.tsbuildinfo
31 |
--------------------------------------------------------------------------------
/tests/vuejs/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
3 | }
4 |
--------------------------------------------------------------------------------
/tests/vuejs/env.d.ts:
--------------------------------------------------------------------------------
1 | /// Vite App
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/tests/vuejs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "svelte-range-slider-vue-test",
3 | "version": "0.0.0",
4 | "private": true,
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "run-p type-check \"build-only {@}\" --",
9 | "preview": "vite preview",
10 | "build-only": "vite build",
11 | "type-check": "vue-tsc --build --force"
12 | },
13 | "dependencies": {
14 | "vue": "^3.4.15"
15 | },
16 | "devDependencies": {
17 | "@tsconfig/node20": "^20.1.2",
18 | "@types/node": "^20.11.10",
19 | "@vitejs/plugin-vue": "^5.0.3",
20 | "@vue/tsconfig": "^0.5.1",
21 | "npm-run-all2": "^6.1.1",
22 | "typescript": "~5.3.0",
23 | "vite": "^5.0.11",
24 | "vue-tsc": "^1.8.27",
25 | "svelte-range-slider-pips": "file:../.."
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/tests/vuejs/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simeydotme/svelte-range-slider-pips/f0d144cf047d59381c204cd34ffdcac5a5b1896d/tests/vuejs/public/favicon.ico
--------------------------------------------------------------------------------
/tests/vuejs/src/App.vue:
--------------------------------------------------------------------------------
1 |
35 |
36 |
37 |
38 |
40 |
42 |
43 |
44 |
45 | {{ values }}
46 | Add 10
47 |
48 |
49 |
67 |
--------------------------------------------------------------------------------
/tests/vuejs/src/assets/base.css:
--------------------------------------------------------------------------------
1 | /* color palette from */
2 | :root {
3 | --vt-c-white: #ffffff;
4 | --vt-c-white-soft: #f8f8f8;
5 | --vt-c-white-mute: #f2f2f2;
6 |
7 | --vt-c-black: #181818;
8 | --vt-c-black-soft: #222222;
9 | --vt-c-black-mute: #282828;
10 |
11 | --vt-c-indigo: #2c3e50;
12 |
13 | --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
14 | --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
15 | --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
16 | --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
17 |
18 | --vt-c-text-light-1: var(--vt-c-indigo);
19 | --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
20 | --vt-c-text-dark-1: var(--vt-c-white);
21 | --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
22 | }
23 |
24 | /* semantic color variables for this project */
25 | :root {
26 | --color-background: var(--vt-c-white);
27 | --color-background-soft: var(--vt-c-white-soft);
28 | --color-background-mute: var(--vt-c-white-mute);
29 |
30 | --color-border: var(--vt-c-divider-light-2);
31 | --color-border-hover: var(--vt-c-divider-light-1);
32 |
33 | --color-heading: var(--vt-c-text-light-1);
34 | --color-text: var(--vt-c-text-light-1);
35 |
36 | --section-gap: 160px;
37 | }
38 |
39 | @media (prefers-color-scheme: dark) {
40 | :root {
41 | --color-background: var(--vt-c-black);
42 | --color-background-soft: var(--vt-c-black-soft);
43 | --color-background-mute: var(--vt-c-black-mute);
44 |
45 | --color-border: var(--vt-c-divider-dark-2);
46 | --color-border-hover: var(--vt-c-divider-dark-1);
47 |
48 | --color-heading: var(--vt-c-text-dark-1);
49 | --color-text: var(--vt-c-text-dark-2);
50 | }
51 | }
52 |
53 | *,
54 | *::before,
55 | *::after {
56 | box-sizing: border-box;
57 | margin: 0;
58 | font-weight: normal;
59 | }
60 |
61 | body {
62 | min-height: 100vh;
63 | color: var(--color-text);
64 | background: var(--color-background);
65 | transition:
66 | color 0.5s,
67 | background-color 0.5s;
68 | line-height: 1.6;
69 | font-family:
70 | Inter,
71 | -apple-system,
72 | BlinkMacSystemFont,
73 | 'Segoe UI',
74 | Roboto,
75 | Oxygen,
76 | Ubuntu,
77 | Cantarell,
78 | 'Fira Sans',
79 | 'Droid Sans',
80 | 'Helvetica Neue',
81 | sans-serif;
82 | font-size: 15px;
83 | text-rendering: optimizeLegibility;
84 | -webkit-font-smoothing: antialiased;
85 | -moz-osx-font-smoothing: grayscale;
86 | }
87 |
--------------------------------------------------------------------------------
/tests/vuejs/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
8 |
9 |
{{ msg }}
10 |
11 | You’ve successfully created a project with
12 | Vite +
13 | Vue 3 .
14 |
15 |
17 |
18 |
42 |
--------------------------------------------------------------------------------
/tests/vuejs/src/main.ts:
--------------------------------------------------------------------------------
1 | import './assets/main.css';
2 |
3 | import { createApp } from 'vue';
4 | import App from './App.vue';
5 |
6 | createApp(App).mount('#app');
7 |
--------------------------------------------------------------------------------
/tests/vuejs/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@vue/tsconfig/tsconfig.dom.json",
3 | "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
4 | "exclude": ["src/**/__tests__/*"],
5 | "compilerOptions": {
6 | "composite": true,
7 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
8 |
9 | "baseUrl": ".",
10 | "paths": {
11 | "@/*": ["./src/*"]
12 | }
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/tests/vuejs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [],
3 | "references": [
4 | {
5 | "path": "./tsconfig.node.json"
6 | },
7 | {
8 | "path": "./tsconfig.app.json"
9 | }
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/tests/vuejs/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@tsconfig/node20/tsconfig.json",
3 | "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "nightwatch.conf.*", "playwright.config.*"],
4 | "compilerOptions": {
5 | "composite": true,
6 | "noEmit": true,
7 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
8 |
9 | "module": "ESNext",
10 | "moduleResolution": "Bundler",
11 | "types": ["node"]
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/tests/vuejs/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { fileURLToPath, URL } from 'node:url';
2 |
3 | import { defineConfig } from 'vite';
4 | import vue from '@vitejs/plugin-vue';
5 |
6 | // https://vitejs.dev/config/
7 | export default defineConfig({
8 | plugins: [vue()],
9 | resolve: {
10 | alias: {
11 | '@': fileURLToPath(new URL('./src', import.meta.url))
12 | }
13 | }
14 | });
15 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./.svelte-kit/tsconfig.json",
3 | "compilerOptions": {
4 | "allowJs": true,
5 | "checkJs": true,
6 | "esModuleInterop": true,
7 | "forceConsistentCasingInFileNames": true,
8 | "resolveJsonModule": true,
9 | "skipLibCheck": true,
10 | "sourceMap": false,
11 | "strict": true,
12 | "module": "NodeNext",
13 | "moduleResolution": "NodeNext",
14 | "types": ["vitest/globals", "@testing-library/jest-dom"]
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import tailwindcss from '@tailwindcss/vite';
2 | import { sveltekit } from '@sveltejs/kit/vite';
3 | import { defineConfig } from 'vitest/config';
4 |
5 | export default defineConfig({
6 | plugins: [tailwindcss(), sveltekit()],
7 | test: {
8 | include: ['tests/vitest/*.{test,spec}.{js,ts}'],
9 | exclude: ['node_modules', 'dist', 'tests'],
10 | environment: 'jsdom',
11 | setupFiles: ['./tests/setupTest.js']
12 | },
13 | server: {
14 | fs: {
15 | allow: ['/dist']
16 | }
17 | }
18 | });
19 |
--------------------------------------------------------------------------------
39 |