Vite + Svelte
20 | 21 |
22 |
24 |
25 | With Runes
10 | 11 | 12 | 13 | {value} 14 |Testing loading jQuery script
11 | 12 | 13 |-7,7
14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/routes/test/range-slider/values/binding/multiple/+page.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 21 | -------------------------------------------------------------------------------- /tests/svelte5/svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-auto'; 2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors 7 | // for more information about preprocessors 8 | preprocess: vitePreprocess(), 9 | 10 | kit: { 11 | // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. 12 | // If your environment is not supported or you settled on a specific environment, switch out the adapter. 13 | // See https://kit.svelte.dev/docs/adapters for more information about adapters. 14 | adapter: adapter() 15 | } 16 | }; 17 | 18 | export default config; 19 | -------------------------------------------------------------------------------- /src/routes/test/range-slider/values/binding/minmax/+page.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 23 | -------------------------------------------------------------------------------- /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/svelte5/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte5", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vite dev --host", 7 | "build": "vite build", 8 | "preview": "vite preview", 9 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", 10 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", 11 | "lint": "prettier --check .", 12 | "format": "prettier --write ." 13 | }, 14 | "devDependencies": { 15 | "@sveltejs/adapter-auto": "^3.0.0", 16 | "@sveltejs/kit": "^2.0.0", 17 | "@sveltejs/vite-plugin-svelte": "^3.0.0", 18 | "prettier": "^3.1.1", 19 | "prettier-plugin-svelte": "^3.1.2", 20 | "svelte": "^5.34.7", 21 | "svelte-check": "^3.6.0", 22 | "svelte-range-slider-pips": "file:../..", 23 | "tslib": "^2.4.1", 24 | "typescript": "^5.0.0", 25 | "vite": "^5.0.3" 26 | }, 27 | "type": "module" 28 | } 29 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 12 | polar: # Replace with a single Polar username 13 | buy_me_a_coffee: simeydotme 14 | thanks_dev: # Replace with a single thanks.dev username 15 | custom: ['https://www.paypal.me/simey/5'] 16 | -------------------------------------------------------------------------------- /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/vuejs/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 |
9 |
16 |
17 |
18 |
42 |
--------------------------------------------------------------------------------
/src/routes/test/nav/clickOutside.ts:
--------------------------------------------------------------------------------
1 | type ClickOutsideEvent = CustomEvent{{ msg }}
10 |11 | You’ve successfully created a project with 12 | Vite + 13 | Vue 3. 14 |
15 |-
33 | {#each item.children as child}
34 |
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 |
39 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/.github/workflows/tests.yml:
--------------------------------------------------------------------------------
1 | name: Tests
2 | on:
3 | push:
4 | branches: [main, next]
5 | pull_request:
6 | branches: [main, next]
7 | jobs:
8 | unit-tests:
9 | name: Unit Tests
10 | timeout-minutes: 10
11 | runs-on: ubuntu-latest
12 | steps:
13 | - uses: actions/checkout@v4
14 | - name: Install Node
15 | uses: actions/setup-node@v4
16 | with:
17 | node-version: lts/*
18 | - name: Install dependencies
19 | run: npm ci
20 | - name: Run Unit tests
21 | run: npm run test:unit
22 |
23 | component-tests:
24 | name: Component Tests
25 | needs: unit-tests
26 | timeout-minutes: 60
27 | runs-on: ubuntu-latest
28 | steps:
29 | - uses: actions/checkout@v4
30 | - uses: actions/setup-node@v4
31 | with:
32 | node-version: lts/*
33 | - name: Install dependencies
34 | run: npm ci
35 | - name: Build Components
36 | run: npm run build
37 | - name: Install Playwright Browsers
38 | run: npx playwright install --with-deps
39 | - name: Run Component tests
40 | run: npx playwright test
41 | - uses: actions/upload-artifact@v4
42 | if: ${{ !cancelled() }}
43 | with:
44 | name: playwright-report
45 | path: playwright-report/
46 | retention-days: 30
47 |
--------------------------------------------------------------------------------
/tests/svelte5/src/routes/runes/test/+page.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 | {values.join(',')}
40 | 41 | 42 |Testing loading JS (umd) script
38 | 39 |-7,7
40 | 41 | 42 | -------------------------------------------------------------------------------- /tests/vanilla/esm.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |Testing loading JS (esm) script
38 | 39 |-7,7
40 | 41 | 42 | -------------------------------------------------------------------------------- /dist/svelte/components/RangePips.svelte.d.ts: -------------------------------------------------------------------------------- 1 | import { SvelteComponent } from "svelte"; 2 | import type { Pip, Formatter } from '../types.js'; 3 | declare const __propDef: { 4 | props: { 5 | range?: boolean | "min" | "max" | undefined; 6 | min?: number | undefined; 7 | max?: number | undefined; 8 | step?: number | undefined; 9 | value?: number | undefined; 10 | values?: number[] | undefined; 11 | vertical?: boolean | undefined; 12 | reversed?: boolean | undefined; 13 | hoverable?: boolean | undefined; 14 | disabled?: boolean | undefined; 15 | limits?: [number, number] | null | undefined; 16 | pipstep?: number | undefined; 17 | all?: Pip; 18 | first?: Pip; 19 | last?: Pip; 20 | rest?: Pip; 21 | prefix?: string | undefined; 22 | suffix?: string | undefined; 23 | formatter?: Formatter | undefined; 24 | precision?: number | undefined; 25 | focus: boolean; 26 | orientationStart: 'left' | 'right' | 'top' | 'bottom'; 27 | moveHandle: (index: number | null, value: number) => void; 28 | }; 29 | events: { 30 | [evt: string]: CustomEvent
39 |
40 |
42 |
41 |
98 |
99 |
151 |
--------------------------------------------------------------------------------
/src/routes/test/range-slider/limits/+page.svelte:
--------------------------------------------------------------------------------
1 |
35 |
36 |
112 |
113 |
115 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "svelte-range-slider-pips",
3 | "version": "4.1.0",
4 | "description": "Multi-Thumb, Accessible, Beautiful Range Slider with Pips",
5 | "repository": {
6 | "type": "git",
7 | "url": "git+https://github.com/simeydotme/svelte-range-slider-pips.git"
8 | },
9 | "homepage": "https://simeydotme.github.io/svelte-range-slider-pips/",
10 | "author": "Simon Goellner Keyboard Interaction Tests
42 | 43 |
44 |
45 |
49 |
53 |
54 |
55 |
71 |
72 |
73 |
97 | Last Event
74 | {#if lastEvent} 75 |
76 |
79 | {:else}
80 | type: {lastEvent.type}
77 |{formatEventDetail(lastEvent.detail)}
78 | No events yet
81 | {/if} 82 | 83 |Event History
84 | {#if events.length > 0} 85 |
86 | {#each events as event}
87 |
93 | {:else}
94 |
88 |
91 | {/each}
92 | type: {event.type}
89 |{formatEventDetail(event.detail)}
90 | No events recorded
95 | {/if} 96 |Dynamic Spring Configuration Tests
47 | 48 | 111 | 112 | 176 | -------------------------------------------------------------------------------- /public/svelte-range-slider-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 87 | -------------------------------------------------------------------------------- /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": "keyboard", 34 | "path": "/test/range-slider/keyboard" 35 | }, 36 | { 37 | "name": "limits", 38 | "path": "/test/range-slider/limits" 39 | }, 40 | { 41 | "name": "minmax", 42 | "path": "/test/range-slider/minmax", 43 | "children": [ 44 | { 45 | "name": "custom-min-max", 46 | "path": "/test/range-slider/minmax/custom-min-max" 47 | }, 48 | { 49 | "name": "decimal-min-max", 50 | "path": "/test/range-slider/minmax/decimal-min-max" 51 | }, 52 | { 53 | "name": "explicit-value", 54 | "path": "/test/range-slider/minmax/explicit-value" 55 | }, 56 | { 57 | "name": "invalid-min-max", 58 | "path": "/test/range-slider/minmax/invalid-min-max" 59 | }, 60 | { 61 | "name": "negative-min-max", 62 | "path": "/test/range-slider/minmax/negative-min-max" 63 | } 64 | ] 65 | }, 66 | { 67 | "name": "pips", 68 | "path": "/test/range-slider/pips", 69 | "children": [ 70 | { 71 | "name": "labels", 72 | "path": "/test/range-slider/pips/labels" 73 | }, 74 | { 75 | "name": "limits", 76 | "path": "/test/range-slider/pips/limits" 77 | }, 78 | { 79 | "name": "pips", 80 | "path": "/test/range-slider/pips/pips" 81 | }, 82 | { 83 | "name": "pipsteps", 84 | "path": "/test/range-slider/pips/pipsteps" 85 | }, 86 | { 87 | "name": "pipsteps-large", 88 | "path": "/test/range-slider/pips/pipsteps-large" 89 | }, 90 | { 91 | "name": "steps", 92 | "path": "/test/range-slider/pips/steps" 93 | } 94 | ] 95 | }, 96 | { 97 | "name": "range", 98 | "path": "/test/range-slider/range", 99 | "children": [ 100 | { 101 | "name": "draggy", 102 | "path": "/test/range-slider/range/draggy" 103 | }, 104 | { 105 | "name": "false", 106 | "path": "/test/range-slider/range/false" 107 | }, 108 | { 109 | "name": "gaps", 110 | "path": "/test/range-slider/range/gaps" 111 | }, 112 | { 113 | "name": "max", 114 | "path": "/test/range-slider/range/max" 115 | }, 116 | { 117 | "name": "min", 118 | "path": "/test/range-slider/range/min" 119 | }, 120 | { 121 | "name": "pushy", 122 | "path": "/test/range-slider/range/pushy" 123 | } 124 | ] 125 | }, 126 | { 127 | "name": "spring", 128 | "path": "", 129 | "children": [ 130 | { 131 | "name": "configurations", 132 | "path": "/test/range-slider/spring/configurations" 133 | }, 134 | { 135 | "name": "dynamic", 136 | "path": "/test/range-slider/spring/dynamic" 137 | } 138 | ] 139 | }, 140 | { 141 | "name": "states", 142 | "path": "", 143 | "children": [ 144 | { 145 | "name": "disabled", 146 | "path": "/test/range-slider/states/disabled" 147 | }, 148 | { 149 | "name": "hoverable", 150 | "path": "/test/range-slider/states/hoverable" 151 | }, 152 | { 153 | "name": "reversed", 154 | "path": "/test/range-slider/states/reversed" 155 | } 156 | ] 157 | }, 158 | { 159 | "name": "styles", 160 | "path": "", 161 | "children": [ 162 | { 163 | "name": "darkmode", 164 | "path": "/test/range-slider/styles/darkmode" 165 | } 166 | ] 167 | }, 168 | { 169 | "name": "values", 170 | "path": "", 171 | "children": [ 172 | { 173 | "name": "binding", 174 | "path": "", 175 | "children": [ 176 | { 177 | "name": "minmax", 178 | "path": "/test/range-slider/values/binding/minmax" 179 | }, 180 | { 181 | "name": "multiple", 182 | "path": "/test/range-slider/values/binding/multiple" 183 | }, 184 | { 185 | "name": "single", 186 | "path": "/test/range-slider/values/binding/single" 187 | } 188 | ] 189 | }, 190 | { 191 | "name": "constrained-values", 192 | "path": "/test/range-slider/values/constrained-values" 193 | }, 194 | { 195 | "name": "explicit-value", 196 | "path": "/test/range-slider/values/explicit-value" 197 | }, 198 | { 199 | "name": "multiple-values", 200 | "path": "/test/range-slider/values/multiple-values" 201 | }, 202 | { 203 | "name": "seven-values", 204 | "path": "/test/range-slider/values/seven-values" 205 | }, 206 | { 207 | "name": "single-value", 208 | "path": "/test/range-slider/values/single-value" 209 | }, 210 | { 211 | "name": "value-values", 212 | "path": "/test/range-slider/values/value-values" 213 | } 214 | ] 215 | } 216 | ] 217 | -------------------------------------------------------------------------------- /src/routes/test/range-slider/events/+page.svelte: -------------------------------------------------------------------------------- 1 | 48 | 49 |
50 |
161 |
162 |
223 |
--------------------------------------------------------------------------------
/dist/svelte/utils.d.ts:
--------------------------------------------------------------------------------
1 | import type { NormalisedClient } from './types.js';
2 | /**
3 | * check if the value is a finite number
4 | * @param value the value to check
5 | * @returns true if the value is a finite number
6 | */
7 | export declare function isFiniteNumber(value: number): value is number;
8 | /**
9 | * make sure the value is coerced to a float value
10 | * @param {number|string} value the value to fix
11 | * @param {number} precision the number of decimal places to fix to
12 | * @return {number} a float version of the input
13 | **/
14 | export declare const coerceFloat: (value: number | string, precision?: number) => number;
15 | /**
16 | * clamp a value from a range so that it always
17 | * falls within the min/max values
18 | * @param {number} value the value to clamp
19 | * @param {number} min the minimum value
20 | * @param {number} max the maximum value
21 | * @return {number} the value after it's been clamped
22 | **/
23 | export declare const clampValue: (value: number, min: number, max: number) => number;
24 | /**
25 | * take in a value, and then calculate that value's percentage
26 | * of the overall range (min-max);
27 | * @param {number} value the value we're getting percent for
28 | * @param {number} min the minimum value
29 | * @param {number} max the maximum value
30 | * @param {number} precision the number of decimal places to fix to (default 2)
31 | * @return {number} the percentage value
32 | **/
33 | export declare const valueAsPercent: (value: number, min: number, max: number, precision?: number) => number;
34 | /**
35 | * convert a percentage to a value
36 | * @param {number} percent the percentage to convert
37 | * @param {number} min the minimum value
38 | * @param {number} max the maximum value
39 | * @return {number} the value after it's been converted
40 | **/
41 | export declare const percentAsValue: (percent: number, min: number, max: number) => number;
42 | /**
43 | * align the value with the steps so that it
44 | * always sits on the closest (above/below) step
45 | * @param {number} value the value to align
46 | * @param {number} min the minimum value
47 | * @param {number} max the maximum value
48 | * @param {number} step the step value
49 | * @param {number} precision the number of decimal places to fix to
50 | * @param {number[]} limits the limits to check against
51 | * @return {number} the value after it's been aligned
52 | **/
53 | export declare const constrainAndAlignValue: (value: number, min: number, max: number, step: number, precision?: number, limits?: [number, number] | null) => number;
54 | /**
55 | * helper to take a string of html and return only the text
56 | * @param {string} possibleHtml the string that may contain html
57 | * @return {string} the text from the input
58 | */
59 | export declare const pureText: (possibleHtml?: string) => string;
60 | /**
61 | * normalise a mouse or touch event to return the
62 | * client (x/y) object for that event
63 | * @param {event} event a mouse/touch event to normalise
64 | * @returns {object} normalised event client object (x,y)
65 | **/
66 | export declare const normalisedClient: (event: TouchEvent | MouseEvent) => NormalisedClient;
67 | /**
68 | * helper func to get the index of an element in it's DOM container
69 | * @param {Element} el dom object reference we want the index of
70 | * @returns {number} the index of the input element
71 | **/
72 | export declare const elementIndex: (el: Element | null) => number;
73 | /**
74 | * helper to check if the given value is inside the range
75 | * @param value the value to check
76 | * @param range the range of values to check against
77 | * @param type the type of range to check against
78 | * @returns {boolean} true if the value is in the range
79 | */
80 | export declare const isInRange: (value: number, range: number[], type: string | boolean) => boolean | undefined;
81 | /**
82 | * helper to check if the given value is outside of the limits
83 | * @param value the value to check
84 | * @param limits the limits to check against
85 | * @returns {boolean} true if the value is out of the limits
86 | */
87 | export declare const isOutOfLimit: (value: number, limits: number[] | null) => boolean;
88 | /**
89 | * helper to check if the given value is selected
90 | * @param value the value to check if is selected
91 | * @param values the values to check against
92 | * @param precision the precision to check against
93 | * @returns {boolean} true if the value is selected
94 | */
95 | export declare const isSelected: (value: number, values: number[], precision?: number) => boolean;
96 | /**
97 | * helper to return the value of a pip based on the index, and the min/max values,
98 | * and the step of the range slider
99 | * @param index the index of the pip
100 | * @param min the minimum value of the range slider
101 | * @param max the maximum value of the range slider
102 | * @param pipStep the step of the pips
103 | * @param step the step of the range slider
104 | * @param precision the precision to check against
105 | * @returns {number} the value of the pip
106 | */
107 | export declare const getValueFromIndex: (index: number, min: number, max: number, pipStep: number, step: number, precision?: number) => number;
108 | /**
109 | * Calculate pointer position, percentage and value for a slider interaction
110 | * @param clientPos The normalized client position (x,y)
111 | * @param dims The slider's bounding rectangle dimensions
112 | * @param vertical Whether the slider is vertical
113 | * @param reversed Whether the slider is reversed
114 | * @param min The minimum value of the slider
115 | * @param max The maximum value of the slider
116 | * @returns Object containing pointer position, percentage and value
117 | */
118 | export declare const calculatePointerValues: (slider: HTMLElement, clientPos: NormalisedClient, vertical: boolean, reversed: boolean, min: number, max: number) => {
119 | pointerVal: number;
120 | pointerPercent: number;
121 | };
122 |
--------------------------------------------------------------------------------
/src/routes/test/range-slider/range/gaps/+page.svelte:
--------------------------------------------------------------------------------
1 |
43 |
44 |
166 |
--------------------------------------------------------------------------------
/tests/playwright/RangeSlider.keyboard.movement.spec.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from '@playwright/test';
2 | import type { Locator, Page } from '@playwright/test';
3 |
4 | async function getAriaNow(page: Page, slider: Locator) {
5 | const handle = slider.locator('.rangeHandle').first();
6 | await expect(handle).toBeVisible();
7 | const now = await handle.getAttribute('aria-valuenow');
8 | return parseInt(now || '0', 10);
9 | }
10 |
11 | test.describe('Keyboard movement: normal, reversed, disabled', () => {
12 | test.beforeEach(async ({ page }) => {
13 | await page.goto('/test/range-slider/keyboard');
14 | await page.waitForLoadState('networkidle');
15 | });
16 |
17 | test.describe('Normal (not reversed, enabled)', () => {
18 | test('ArrowLeft/ArrowRight move by step', async ({ page }) => {
19 | const slider = page.locator('#keyboard-slider');
20 | const handle = slider.locator('.rangeHandle').first();
21 | await handle.focus();
22 | const start = await getAriaNow(page, slider);
23 |
24 | await page.keyboard.press('ArrowRight');
25 | await page.keyboard.press('ArrowRight');
26 | const afterRight = await getAriaNow(page, slider);
27 | expect(afterRight).toBe(start + 2);
28 |
29 | await page.keyboard.press('ArrowLeft');
30 | await page.keyboard.press('ArrowLeft');
31 | await page.keyboard.press('ArrowLeft');
32 | const afterLeft = await getAriaNow(page, slider);
33 | expect(afterLeft).toBe(start - 1);
34 | });
35 |
36 | test('Shift+Arrow moves by ~10%', async ({ page }) => {
37 | const slider = page.locator('#keyboard-slider');
38 | const handle = slider.locator('.rangeHandle').first();
39 | await handle.focus();
40 | const start = await getAriaNow(page, slider);
41 |
42 | await page.keyboard.press('Shift+ArrowRight');
43 | const afterRight = await getAriaNow(page, slider);
44 | expect(afterRight).toBe(start + 10);
45 |
46 | await page.keyboard.press('Shift+ArrowLeft');
47 | await page.keyboard.press('Shift+ArrowLeft');
48 | const afterLeft = await getAriaNow(page, slider);
49 | expect(afterLeft).toBe(start - 10);
50 | });
51 |
52 | test('Ctrl+Arrow moves by ~1%', async ({ page }) => {
53 | const slider = page.locator('#keyboard-slider');
54 | const handle = slider.locator('.rangeHandle').first();
55 | await handle.focus();
56 | const start = await getAriaNow(page, slider);
57 |
58 | await page.keyboard.press('Control+ArrowRight');
59 | const afterRight = await getAriaNow(page, slider);
60 | expect(afterRight).toBe(start + 1);
61 |
62 | await page.keyboard.press('Control+ArrowLeft');
63 | await page.keyboard.press('Control+ArrowLeft');
64 | const afterLeft = await getAriaNow(page, slider);
65 | expect(afterLeft).toBe(start - 1);
66 | });
67 |
68 | test('PageUp/PageDown map to Shift increments', async ({ page }) => {
69 | const slider = page.locator('#keyboard-slider');
70 | const handle = slider.locator('.rangeHandle').first();
71 | await handle.focus();
72 | const start = await getAriaNow(page, slider);
73 |
74 | const before = await getAriaNow(page, slider);
75 | await page.keyboard.press('PageUp');
76 | const up = await getAriaNow(page, slider);
77 | expect(up).toBe(start + 10);
78 |
79 | await page.keyboard.press('PageDown');
80 | await page.keyboard.press('PageDown');
81 | const down = await getAriaNow(page, slider);
82 | expect(down).toBe(start - 10);
83 | });
84 |
85 | test('Home/End go to min/max', async ({ page }) => {
86 | const slider = page.locator('#keyboard-slider');
87 | const handle = slider.locator('.rangeHandle').first();
88 | await handle.focus();
89 |
90 | await page.keyboard.press('Home');
91 | const atMin = await getAriaNow(page, slider);
92 | expect(atMin).toBe(0);
93 |
94 | await page.keyboard.press('End');
95 | const atMax = await getAriaNow(page, slider);
96 | expect(atMax).toBe(100);
97 | });
98 | });
99 |
100 | test.describe('Reversed (enabled)', () => {
101 | test.beforeEach(async ({ page }) => {
102 | await page.getByLabel('Reversed').check();
103 | });
104 |
105 | test('ArrowLeft/ArrowRight invert direction', async ({ page }) => {
106 | const slider = page.locator('#keyboard-slider');
107 | const handle = slider.locator('.rangeHandle').first();
108 | await handle.focus();
109 | const start = await getAriaNow(page, slider);
110 |
111 | await page.keyboard.press('ArrowRight');
112 | const afterRight = await getAriaNow(page, slider);
113 | // In reversed, ArrowRight should still increase, but move left
114 | expect(afterRight).toBe(start + 1);
115 |
116 | await page.keyboard.press('ArrowLeft');
117 | await page.keyboard.press('ArrowLeft');
118 | const afterLeft = await getAriaNow(page, slider);
119 | // In reversed, ArrowLeft should still decrease, but move right
120 | expect(afterLeft).toBe(start - 1);
121 | });
122 |
123 | test('Home/End go to min/max (reversed direction)', async ({ page }) => {
124 | const slider = page.locator('#keyboard-slider');
125 | const handle = slider.locator('.rangeHandle').first();
126 | await handle.focus();
127 |
128 | await page.keyboard.press('Home');
129 | const afterHome = await getAriaNow(page, slider);
130 | expect(afterHome).toBe(0);
131 |
132 | await page.keyboard.press('End');
133 | const afterEnd = await getAriaNow(page, slider);
134 | expect(afterEnd).toBe(100);
135 | });
136 | });
137 |
138 | test.describe('Disabled', () => {
139 | test.beforeEach(async ({ page }) => {
140 | await page.getByLabel('Disabled').check();
141 | });
142 |
143 | test('No movement or events on any key', async ({ page }) => {
144 | const slider = page.locator('#keyboard-slider');
145 | const handle = slider.locator('.rangeHandle').first();
146 | const eventHistory = page.locator('.event-history');
147 | const start = await getAriaNow(page, slider);
148 | await handle.focus();
149 | const keys = [
150 | 'ArrowLeft',
151 | 'ArrowRight',
152 | 'Shift+ArrowLeft',
153 | 'Shift+ArrowRight',
154 | 'Control+ArrowLeft',
155 | 'Control+ArrowRight',
156 | 'PageUp',
157 | 'PageDown',
158 | 'Home',
159 | 'End'
160 | ];
161 | for (const key of keys) {
162 | await page.keyboard.press(key);
163 | }
164 | const end = await getAriaNow(page, slider);
165 | expect(end).toBe(start);
166 | await expect(eventHistory.locator('.event-detail')).toHaveCount(0);
167 | });
168 | });
169 | });
170 |
--------------------------------------------------------------------------------
/src/routes/test/range-slider/floats/+page.svelte:
--------------------------------------------------------------------------------
1 |
30 |
31 |
166 |
167 |
172 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/src/routes/test/range-slider/minmax/+page.svelte:
--------------------------------------------------------------------------------
1 |
14 |
15 |
197 |
198 |
204 |
--------------------------------------------------------------------------------
Range Slider Event Tests
51 | 52 |
53 |
57 |
61 |
62 |
63 |
64 |
68 |
69 |
83 |
84 |
101 |
102 |
119 |
120 |
134 |
135 | Test Scenarios
65 | 66 | 67 |
136 |
160 | Last Event
137 | {#if lastEvent} 138 |
139 |
142 | {:else}
143 | type: {lastEvent.type}
140 |{formatEventDetail(lastEvent.detail)}
141 | No events yet
144 | {/if} 145 | 146 |Event History
147 | {#if events.length > 0} 148 |
149 | {#each events as event}
150 |
156 | {:else}
157 |
151 |
154 | {/each}
155 | type: {event.type}
152 |{formatEventDetail(event.detail)}
153 | No events recorded
158 | {/if} 159 |