From 2c470625a77e4328306691ea417614ebedb44b7b78196ed8f13fca3b2dbcbae9 Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Fri, 28 Nov 2025 14:27:45 +0100
Subject: [PATCH] Prepare sliders, need to be fully completed and tested

---
 .gitignore                       |  23 +-
 eslint.config.mjs                | 724 +++++++++++++++++++++++++++++++
 index.html                       |  13 +
 package.json                     |  41 ++
 public/vite.svg                  |   1 +
 src/App.vue                      |  22 +
 src/components/DoubleSlider.vue  | 158 +++++++
 src/components/NotchedSlider.vue | 228 ++++++++++
 src/components/SingleSlider.vue  |   0
 src/index.ts                     |   9 +
 src/main.ts                      |   7 +
 src/style.css                    |  79 ++++
 tsconfig.app.json                |  16 +
 tsconfig.json                    |   7 +
 tsconfig.node.json               |  26 ++
 vite.config.ts                   |  31 ++
 16 files changed, 1375 insertions(+), 10 deletions(-)
 create mode 100644 eslint.config.mjs
 create mode 100644 index.html
 create mode 100644 package.json
 create mode 100644 public/vite.svg
 create mode 100644 src/App.vue
 create mode 100644 src/components/DoubleSlider.vue
 create mode 100644 src/components/NotchedSlider.vue
 create mode 100644 src/components/SingleSlider.vue
 create mode 100644 src/index.ts
 create mode 100644 src/main.ts
 create mode 100644 src/style.css
 create mode 100644 tsconfig.app.json
 create mode 100644 tsconfig.json
 create mode 100644 tsconfig.node.json
 create mode 100644 vite.config.ts

diff --git a/.gitignore b/.gitignore
index a1e206a..4582ab3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,11 +1,14 @@
-# ---> Vue
-# gitignore template for Vue.js projects
-#
-# Recommended template: Node.gitignore
-
-# TODO: where does this rule come from?
-docs/_book
-
-# TODO: where does this rule come from?
-test/
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
+package-lock.json
+node_modules
+dist
+dist-ssr
+*.local
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000..7d5f173
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,724 @@
+import eslint from '@eslint/js';
+import globals from 'globals';
+import stylistic from '@stylistic/eslint-plugin';
+import tseslint from 'typescript-eslint';
+import typescript from '@typescript-eslint/eslint-plugin';
+import vue from 'eslint-plugin-vue';
+
+const style = {
+    'plugins': {
+        '@stylistic': stylistic,
+        '@stylistic/js': stylistic,
+        '@stylistic/ts': stylistic,
+    },
+    'files': [
+        '**/*.ts',
+        '**/*.js',
+        '**/*.mjs',
+        '**/*.cjs',
+        '**/*.tsx',
+        '**/*.jsx'
+    ],
+    'rules': {
+        'sort-imports': [
+            'warn',
+            {
+                'ignoreCase': false,
+                'ignoreDeclarationSort': false,
+                'ignoreMemberSort': false,
+                'memberSyntaxSortOrder': [
+                    'none',
+                    'all',
+                    'multiple',
+                    'single'
+                ],
+                'allowSeparatedGroups': false
+            }
+        ],
+        // Formatting
+        '@stylistic/array-bracket-newline': [
+            'error',
+            {
+                'multiline': true,
+                'minItems': 2
+            }
+        ],
+        '@stylistic/array-bracket-spacing': [
+            'error',
+            'always',
+            {
+                'singleValue': true,
+                'arraysInArrays': true,
+                'objectsInArrays': true
+            }
+        ],
+        '@stylistic/array-element-newline': [
+            'error',
+            {
+                'multiline': true,
+                'minItems': 2
+            }
+        ],
+        '@stylistic/arrow-parens': [
+            'error',
+            'as-needed'
+        ],
+        '@stylistic/arrow-spacing': [
+            'error',
+            {
+                'before': true,
+                'after': true
+            }
+        ],
+        '@stylistic/block-spacing': [
+            'error',
+            'always'
+        ],
+        '@stylistic/brace-style': [
+            'error',
+            '1tbs'
+        ],
+        '@stylistic/comma-spacing': [
+            'error',
+            {
+                'before': false,
+                'after': true
+            }
+        ],
+        '@stylistic/comma-style': [
+            'error',
+            'last'
+        ],
+        '@stylistic/dot-location': [
+            'error',
+            'property'
+        ],
+        '@stylistic/eol-last': [
+            'error',
+            'always'
+        ],
+        '@stylistic/function-call-spacing': [
+            'error',
+            'never'
+        ],
+        '@stylistic/function-paren-newline': [
+            'error',
+            {
+                'minItems': 3
+            }
+        ],
+        '@stylistic/function-call-argument-newline': [
+            'error',
+            'consistent'
+        ],
+        '@stylistic/implicit-arrow-linebreak': [
+            'error',
+            'beside'
+        ],
+        '@stylistic/indent': [
+            'error',
+            4
+        ],
+        '@stylistic/key-spacing': [
+            'error',
+            {
+                'beforeColon': false,
+                'afterColon': true
+            }
+        ],
+        '@stylistic/keyword-spacing': [
+            'error',
+            {
+                'before': true,
+                'after': true
+            }
+        ],
+        '@stylistic/lines-between-class-members': [
+            'error',
+            'always'
+        ],
+        '@stylistic/max-len': [
+            'warn',
+            {
+                'code': 120,
+                'comments': 140,
+                'ignoreComments': false,
+                'ignoreUrls': true,
+                'ignoreStrings': false
+            }
+        ],
+        '@stylistic/new-parens': [
+            'error',
+            'always'
+        ],
+        '@stylistic/newline-per-chained-call': [ 'error' ],
+        '@stylistic/no-extra-parens': [
+            'error',
+            'all',
+            {
+                'nestedBinaryExpressions': false,
+                'ternaryOperandBinaryExpressions': false,
+                'ignoreJSX': 'multi-line',
+                'nestedConditionalExpressions': false
+            }
+        ],
+        '@stylistic/no-extra-semi': 'error',
+        '@stylistic/no-floating-decimal': 'error',
+        '@stylistic/no-mixed-operators': 'error',
+        '@stylistic/no-mixed-spaces-and-tabs': 'error',
+        '@stylistic/no-multi-spaces': 'error',
+        '@stylistic/no-multiple-empty-lines': [
+            'error',
+            {
+                'max': 3,
+                'maxEOF': 2
+            }
+        ],
+        '@stylistic/no-tabs': 'error',
+        '@stylistic/no-trailing-spaces': 'error',
+        '@stylistic/no-whitespace-before-property': 'error',
+        '@stylistic/object-curly-newline': [
+            'error',
+            {
+                'multiline': true,
+                'minProperties': 1
+            }
+        ],
+        '@stylistic/object-curly-spacing': [
+            'error',
+            'always'
+        ],
+        '@stylistic/object-property-newline': 'error',
+        '@stylistic/operator-linebreak': [
+            'error',
+            'before'
+        ],
+        '@stylistic/one-var-declaration-per-line': 'error',
+        '@stylistic/padded-blocks': [
+            'error',
+            {
+                'blocks': 'never',
+                'classes': 'always',
+                'switches': 'never',
+            }
+        ],
+
+        // Padding lines. The most in-depth part of this config
+        '@stylistic/padding-line-between-statements': [
+            'error',
+            // Variables, Constants
+            {
+                'blankLine': 'never',
+                'prev': 'var',
+                'next': 'var'
+            },
+            {
+                'blankLine': 'never',
+                'prev': 'let',
+                'next': 'let'
+            },
+            {
+                'blankLine': 'never',
+                'prev': 'const',
+                'next': 'const'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'var',
+                'next': [
+                    'block',
+                    'block-like',
+                    'break',
+                    'cjs-export',
+                    'cjs-import',
+                    'class',
+                    'const',
+                    'continue',
+                    'debugger',
+                    'directive',
+                    'do',
+                    'empty',
+                    'export',
+                    'expression',
+                    'for',
+                    'function',
+                    'if',
+                    'iife',
+                    'import',
+                    'let',
+                    'return',
+                    'switch',
+                    'throw',
+                    'try',
+                    'var',
+                    'with'
+                ]
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'let',
+                'next': [
+                    'block',
+                    'block-like',
+                    'break',
+                    'cjs-export',
+                    'cjs-import',
+                    'class',
+                    'const',
+                    'continue',
+                    'debugger',
+                    'directive',
+                    'do',
+                    'empty',
+                    'export',
+                    'expression',
+                    'for',
+                    'function',
+                    'if',
+                    'iife',
+                    'import',
+                    'return',
+                    'switch',
+                    'throw',
+                    'try',
+                    'var',
+                    'while',
+                    'with'
+                ]
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'const',
+                'next': [
+                    'block',
+                    'block-like',
+                    'break',
+                    'cjs-export',
+                    'cjs-import',
+                    'class',
+                    'continue',
+                    'debugger',
+                    'directive',
+                    'do',
+                    'empty',
+                    'export',
+                    'expression',
+                    'for',
+                    'function',
+                    'if',
+                    'iife',
+                    'import',
+                    'let',
+                    'return',
+                    'switch',
+                    'throw',
+                    'try',
+                    'var',
+                    'while',
+                    'with'
+                ]
+            },
+            // Import
+            {
+                'blankLine': 'never',
+                'prev': 'import',
+                'next': 'import'
+            },
+            {
+                'blankLine': 'never',
+                'prev': 'cjs-import',
+                'next': 'cjs-import'
+            },
+            {
+                'blankLine': 'always',
+                'prev': [
+                    'block',
+                    'block-like',
+                    'break',
+                    'cjs-export',
+                    'class',
+                    'const',
+                    'continue',
+                    'debugger',
+                    'directive',
+                    'do',
+                    'empty',
+                    'export',
+                    'expression',
+                    'for',
+                    'function',
+                    'if',
+                    'iife',
+                    'let',
+                    'return',
+                    'switch',
+                    'throw',
+                    'try',
+                    'var',
+                    'while',
+                    'with'
+                ],
+                'next': 'cjs-import'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'cjs-import',
+                'next': [
+                    'block',
+                    'block-like',
+                    'break',
+                    'cjs-export',
+                    'class',
+                    'const',
+                    'continue',
+                    'debugger',
+                    'directive',
+                    'do',
+                    'empty',
+                    'export',
+                    'expression',
+                    'for',
+                    'function',
+                    'if',
+                    'iife',
+                    'let',
+                    'return',
+                    'switch',
+                    'throw',
+                    'try',
+                    'var',
+                    'while',
+                    'with'
+                ]
+            },
+            {
+                'blankLine': 'always',
+                'prev': [
+                    'block',
+                    'block-like',
+                    'break',
+                    'cjs-export',
+                    'class',
+                    'const',
+                    'continue',
+                    'debugger',
+                    'directive',
+                    'do',
+                    'empty',
+                    'export',
+                    'expression',
+                    'for',
+                    'function',
+                    'if',
+                    'iife',
+                    'let',
+                    'return',
+                    'switch',
+                    'throw',
+                    'try',
+                    'var',
+                    'while',
+                    'with'
+                ],
+                'next': 'import'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'import',
+                'next': [
+                    'block',
+                    'block-like',
+                    'break',
+                    'cjs-export',
+                    'class',
+                    'const',
+                    'continue',
+                    'debugger',
+                    'directive',
+                    'do',
+                    'empty',
+                    'export',
+                    'expression',
+                    'for',
+                    'function',
+                    'if',
+                    'iife',
+                    'let',
+                    'return',
+                    'switch',
+                    'throw',
+                    'try',
+                    'var',
+                    'while',
+                    'with'
+                ]
+            },
+            // If
+            {
+                'blankLine': 'always',
+                'prev': '*',
+                'next': 'if'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'if',
+                'next': '*'
+            },
+            // For
+            {
+                'blankLine': 'always',
+                'prev': '*',
+                'next': 'for'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'for',
+                'next': '*'
+            },
+            // While
+            {
+                'blankLine': 'always',
+                'prev': '*',
+                'next': 'while'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'while',
+                'next': '*'
+            },
+            // Functions
+            {
+                'blankLine': 'always',
+                'prev': '*',
+                'next': 'function'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'function',
+                'next': '*'
+            },
+            // Block Statements
+            {
+                'blankLine': 'always',
+                'prev': '*',
+                'next': 'block-like'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'block-like',
+                'next': '*'
+            },
+            // Switch
+            {
+                'blankLine': 'always',
+                'prev': '*',
+                'next': 'switch'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'switch',
+                'next': '*'
+            },
+            // Try-Catch
+            {
+                'blankLine': 'always',
+                'prev': '*',
+                'next': 'try'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'try',
+                'next': '*'
+            },
+            // Throw
+            {
+                'blankLine': 'always',
+                'prev': '*',
+                'next': 'throw'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'throw',
+                'next': '*'
+            },
+            // Return
+            {
+                'blankLine': 'never',
+                'prev': 'return',
+                'next': '*'
+            },
+            {
+                'blankLine': 'always',
+                'prev': '*',
+                'next': 'return'
+            },
+            // Export
+            {
+                'blankLine': 'always',
+                'prev': '*',
+                'next': 'export'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'export',
+                'next': '*'
+            },
+            {
+                'blankLine': 'always',
+                'prev': '*',
+                'next': 'cjs-export'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'cjs-export',
+                'next': '*'
+            },
+            // Classes
+            {
+                'blankLine': 'always',
+                'prev': '*',
+                'next': 'class'
+            },
+            {
+                'blankLine': 'always',
+                'prev': 'class',
+                'next': '*'
+            },
+        ],
+        '@stylistic/quote-props': [
+            'error',
+            'always'
+        ],
+        '@stylistic/quotes': [
+            'error',
+            'single'
+        ],
+        '@stylistic/rest-spread-spacing': [
+            'error',
+            'never'
+        ],
+        '@stylistic/semi': [
+            'error',
+            'always'
+        ],
+        '@stylistic/semi-spacing': [
+            'error',
+            {
+                'before': false,
+                'after': true
+            }
+        ],
+        '@stylistic/semi-style': [
+            'error',
+            'last'
+        ],
+        '@stylistic/space-before-blocks': [
+            'error',
+            'always'
+        ],
+        '@stylistic/space-before-function-paren': [
+            'error',
+            'always'
+        ],
+        '@stylistic/space-in-parens': [
+            'error',
+            'always'
+        ],
+        '@stylistic/space-infix-ops': [
+            'error',
+            {
+                'int32Hint': false
+            }
+        ],
+        '@stylistic/space-unary-ops': 'error',
+        '@stylistic/spaced-comment': [
+            'error',
+            'always'
+        ],
+        '@stylistic/template-curly-spacing': [
+            'error',
+            'always'
+        ],
+        '@stylistic/switch-colon-spacing': 'error',
+        '@stylistic/wrap-iife': [
+            'error',
+            'inside'
+        ],
+        '@stylistic/wrap-regex': 'error',
+        '@stylistic/ts/type-annotation-spacing': 'error',
+    }
+};
+
+/** @type {import('eslint').Linter.Config} */
+export default tseslint.config(
+    // Base JavaScript rules
+    eslint.configs.recommended,
+    tseslint.configs.recommended,
+    style,
+
+    // Vue support (including TS and JSX inside SFCs)
+    {
+        'files': [ '**/*.vue' ],
+        'languageOptions': {
+            'sourceType': 'module',
+            'ecmaVersion': 'latest',
+            'globals': globals.browser,
+            'parserOptions': {
+                'parser': tseslint.parser,
+            },
+        },
+        'plugins': {
+            'vue': vue,
+            '@stylistic': stylistic,
+            '@stylistic/js': stylistic,
+            '@stylistic/ts': stylistic,
+            '@typescript-eslint': typescript,
+        },
+        'extends': [
+            eslint.configs.recommended,
+            ...vue.configs['flat/recommended']
+        ],
+        'rules': {
+            ...typescript.configs.recommended.rules,
+            ...style.rules,
+
+            // Vue specific rules
+            '@stylistic/indent': 'off',
+            'vue/html-indent': [
+                'error',
+                4
+            ],
+            'vue/html-comment-indent': [
+                'error',
+                4
+            ],
+            'vue/script-indent': [
+                'error',
+                4,
+                {
+                    'baseIndent': 1,
+                    'switchCase': 1
+                }
+            ],
+            'vue/html-self-closing': [
+                'error',
+                {
+                    'html': {
+                        'void': 'never',
+                        'normal': 'never',
+                        'component': 'always'
+                    },
+                    'svg': 'always',
+                    'math': 'never'
+                }
+            ],
+            'vue/max-attributes-per-line': [
+                'error',
+                {
+                    'singleline': 3,
+                    'multiline': 1,
+                }
+            ],
+        },
+    },
+);
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d51020d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>vue3-slider</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..8302f19
--- /dev/null
+++ b/package.json
@@ -0,0 +1,41 @@
+{
+    "name": "vue3-slider",
+    "private": false,
+    "version": "1.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vue-tsc -b && vite build",
+        "preview": "vite preview"
+    },
+    "main": "./dist/fileName.umd.js",
+    "module": "./dist/fileName.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/fileName.esm.js",
+            "require": "./dist/fileName.js"
+        }
+    },
+    "files": [
+        "dist",
+        "src"
+    ],
+    "peerDependencies": {
+        "vue": "^3.5.24"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.39.1",
+        "@stylistic/eslint-plugin": "^5.6.1",
+        "@types/node": "^24.10.1",
+        "@vitejs/plugin-vue": "^6.0.1",
+        "@vue/tsconfig": "^0.8.1",
+        "eslint-plugin-vue": "^10.6.2",
+        "typescript": "~5.9.3",
+        "typescript-eslint": "^8.48.0",
+        "vite": "^7.2.4",
+        "vite-plugin-dts": "^4.5.4",
+        "vue-tsc": "^3.1.4",
+        "vue": "^3.5.24"
+    }
+}
diff --git a/public/vite.svg b/public/vite.svg
new file mode 100644
index 0000000..a77ffb4
--- /dev/null
+++ b/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..d8aa617
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+    import DoubleSlider from './components/DoubleSlider.vue';
+    import NotchedSlider from './components/NotchedSlider.vue';
+    import {
+        ref
+    } from 'vue';
+
+    const notchedSlider = ref( NotchedSlider );
+
+    const setUpSlider = () => {
+        setTimeout( () => {
+            notchedSlider.value.setUp( 5 );
+        }, 500 );
+    };
+</script>
+
+<template>
+    <div>
+        <NotchedSlider ref="notchedSlider" slider-id="test" @ready="setUpSlider()" />
+        <DoubleSlider bar-color="red" handle-color="red" />
+    </div>
+</template>
diff --git a/src/components/DoubleSlider.vue b/src/components/DoubleSlider.vue
new file mode 100644
index 0000000..8615661
--- /dev/null
+++ b/src/components/DoubleSlider.vue
@@ -0,0 +1,158 @@
+<template>
+    <div class="vue3-slider-double">
+        <div
+            class="slider-bar"
+            :style="'left: ' + ( posLeft ) + 'px; width: '
+                + ( 200 - posRight - posLeft ) + 'px;'
+                + 'background-color: ' + $props[ 'barColor' ] + ';'"
+        ></div>
+        <div
+            :style="'left: ' + ( posLeft - 5 ) + 'px;'
+                + 'background-color: ' + $props[ 'barColor' ] + ';'"
+            class="slider-knob"
+        >
+            <div
+                :class="'drag-support' + ( isDraggingLeft ? ' dragging' : '' )"
+                @mousedown="( e ) => { startMove( e.screenX, 'left' ) }"
+                @mousemove="( e ) => { handleMove( e.screenX ) }"
+                @mouseup="() => endMove()"
+                @touchmove="( ev ) => { handleMove( ev.touches[ 0 ]!.screenX ) }"
+                @touchstart="( ev ) => { startMove( ev.touches[ 0 ]!.screenX, 'left' ) }"
+                @touchend="() => { endMove() }"
+            ></div>
+        </div>
+        <div
+            :style="'right: ' + ( posRight - 5 ) + 'px;'
+                + 'background-color: ' + $props[ 'barColor' ] + ';'"
+            class="slider-knob"
+        >
+            <div
+                :class="'drag-support' + ( isDraggingRight ? ' dragging' : '' )"
+                @mousedown="( e ) => { startMove( e.screenX, 'right' ) }"
+                @mousemove="( e ) => { handleMove( e.screenX ) }"
+                @mouseup="() => { endMove() }"
+                @touchmove="( e ) => { handleMove( e.touches[ 0 ]!.screenX ) }"
+                @touchstart="( e ) => { startMove( e.touches[ 0 ]!.screenX, 'right' ) }"
+                @touchend="() => { endMove() }"
+            ></div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import {
+        ref
+    } from 'vue';
+
+    const isDraggingLeft = ref( false );
+    const isDraggingRight = ref( false );
+    const posLeft = ref( 0 );
+
+    let originalPosLeft = 0;
+
+    const posRight = ref( 0 );
+
+    let originalPosRight = 0;
+
+    const currentlyMoving = ref( '' );
+
+    let offset = 0;
+
+    const emits = defineEmits( [ 'interval' ] );
+
+    const startMove = ( x: number, slider: string ) => {
+        currentlyMoving.value = slider;
+        offset = x;
+
+        if ( slider === 'left' ) {
+            isDraggingLeft.value = true;
+        } else if ( slider === 'right' ) {
+            isDraggingRight.value = true;
+        }
+    };
+
+    const handleMove = ( x: number ) => {
+        if ( currentlyMoving.value === 'right' ) {
+            if ( originalPosRight - x + offset >= 0 && originalPosRight - x + offset < 200 - originalPosLeft - 20 ) {
+                posRight.value = originalPosRight - x + offset;
+            } else if ( originalPosRight - x + offset <= 0 ) {
+                posRight.value = 0;
+            } else {
+                posRight.value = 200 - originalPosLeft - 20;
+            }
+
+            emits( 'interval', [
+                posLeft.value / 2,
+                ( 200 - posRight.value ) / 2
+            ] );
+        } else if ( currentlyMoving.value === 'left' ) {
+            if ( x - offset + originalPosLeft >= 0 && x - offset + originalPosLeft < 200 - originalPosRight - 20 ) {
+                posLeft.value = x - offset + originalPosLeft;
+            } else if ( x - offset + originalPosLeft <= 0 ) {
+                posLeft.value = 0;
+            } else {
+                posLeft.value = 200 - originalPosRight - 20;
+            }
+
+            emits( 'interval', [
+                posLeft.value / 2,
+                ( 200 - posRight.value ) / 2
+            ] );
+        }
+    };
+
+    const endMove = () => {
+        currentlyMoving.value = '';
+        isDraggingLeft.value = false;
+        isDraggingRight.value = false;
+        originalPosLeft = posLeft.value;
+        originalPosRight = posRight.value;
+    };
+
+    defineProps<{
+        'handleColor': string,
+        'barColor': string
+    }>();
+</script>
+
+
+<style scoped>
+    .vue3-slider-double {
+        position: relative;
+        width: 200px;
+        height: 10px;
+        border: black solid 1px;
+        border-radius: 50px;
+    }
+
+    .vue3-slider-double .slider-knob {
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        border-radius: 50px;
+        top: -5px;
+    }
+
+    .vue3-slider-double .drag-support {
+        width: 100%;
+        height: 100%;
+        border-radius: 50px;
+        background: none;
+        cursor: pointer;
+    }
+
+    .vue3-slider-double .drag-support.dragging {
+        position: fixed;
+        cursor: move;
+        top: 0;
+        left: 0;
+        height: 100vh;
+        width: 100vw;
+    }
+
+    .vue3-slider-double .slider-bar {
+        position: absolute;
+        background-color: var( --hover-color );
+        height: 10px;
+    }
+</style>
diff --git a/src/components/NotchedSlider.vue b/src/components/NotchedSlider.vue
new file mode 100644
index 0000000..311f8f9
--- /dev/null
+++ b/src/components/NotchedSlider.vue
@@ -0,0 +1,228 @@
+<script setup lang="ts">
+    import {
+        type Ref, ref
+    } from 'vue';
+
+    interface SliderStop {
+        'x': number;
+        'index': number;
+    }
+
+    const maxWidth = ref( window.innerWidth );
+    const sliderOffset = -10;
+    const sliderFillPosLeft = ref( sliderOffset ); // Offset from left edge
+    const sliderFillPosRight = ref( maxWidth.value ); // Offset from right edge
+    const sliderStops: Ref<SliderStop[]> = ref( [] );
+    const sliderIndex = ref( 0 );
+
+    let intervalSize = 0;
+
+    const setUp = ( stops: number, preset?: number ) => {
+        maxWidth.value = document.getElementById( 'slider-' + props[ 'sliderId' ] )!.clientWidth;
+        sliderStops.value = [];
+        intervalSize = maxWidth.value / ( stops - 1 );
+
+        for ( let i = 0; i < stops; i++ ) {
+            sliderStops.value.push( {
+                'x': ( intervalSize * i ) - 10,
+                'index': i,
+            } );
+        }
+
+        setSliderIndex( preset ?? 0 );
+    };
+
+    const xOffset = ref( 0 );
+    const isDragging = ref( false );
+    const sliderKnobPos = ref( sliderOffset );
+
+    let originalSliderPos = sliderOffset;
+
+    const startDrag = ( x: number ) => {
+        xOffset.value = x;
+        isDragging.value = true;
+        originalSliderPos = sliderKnobPos.value;
+    };
+
+    const setSliderIndex = ( index: number ) => {
+        sliderIndex.value = index ?? 0;
+        sliderKnobPos.value = ( sliderIndex.value * intervalSize ) + sliderOffset;
+        sliderFillPosRight.value = maxWidth.value - ( sliderIndex.value * intervalSize );
+        emits( 'slider-pos', sliderIndex.value );
+    };
+
+    const handleDrag = ( x: number ) => {
+        if ( isDragging.value ) {
+            const newPos = originalSliderPos + ( x - xOffset.value );
+
+            if ( newPos <= ( maxWidth.value + sliderOffset ) && newPos >= sliderOffset ) {
+                sliderKnobPos.value = newPos;
+            } else if ( newPos < sliderOffset ) {
+                sliderKnobPos.value = sliderOffset;
+            } else {
+                sliderKnobPos.value = maxWidth.value + sliderOffset;
+            }
+
+            // Calculate progress of slider background / progress bar
+            sliderIndex.value = Math.round( sliderKnobPos.value / intervalSize );
+            sliderFillPosRight.value = maxWidth.value - ( sliderIndex.value * intervalSize );
+            emits( 'slider-pos', sliderIndex.value );
+        }
+    };
+
+    const endDrag = () => {
+        isDragging.value = false;
+
+        // snapping
+        sliderIndex.value = Math.round( sliderKnobPos.value / intervalSize );
+        sliderFillPosRight.value = maxWidth.value - ( sliderIndex.value * intervalSize );
+        sliderKnobPos.value = ( sliderIndex.value * intervalSize ) + sliderOffset;
+        emits( 'slider-pos', sliderIndex.value );
+    };
+
+    const props = defineProps<{
+        'sliderId': string
+    }>();
+
+
+    defineExpose( {
+        setUp
+    } );
+
+    const emits = defineEmits( [
+        'slider-pos',
+        'ready'
+    ] );
+
+    setTimeout( () => {
+        emits( 'ready', true );
+    } );
+
+    window.addEventListener( 'resize', () => {
+        setUp( sliderStops.value.length, sliderIndex.value );
+    } );
+</script>
+
+
+<template>
+    <div class="vue3-slider-notched">
+        <div :class="[ 'slider-knob', isDragging ? ' dragging' : undefined ]" :style="'left: ' + sliderKnobPos + 'px;'">
+            <div
+                :class="'slider-drag-support' + ( isDragging ? ' dragging' : '' )"
+                @mousemove="( e ) => handleDrag( e.clientX )"
+                @mouseup="() => endDrag()"
+                @mousedown="( e ) => startDrag( e.clientX )"
+                @touchstart="( e ) => startDrag( e.touches[ 0 ]!.clientX )"
+                @touchend="() => endDrag()"
+                @touchmove="( e ) => handleDrag( e.touches[ 0 ]!.clientX )"
+            ></div>
+        </div>
+
+
+        <div
+            v-for="stop in sliderStops"
+            :key="stop.index"
+            :class="'slider-stop' + ( stop.index <= sliderIndex ? ' stop-filled' : '' )"
+            :style="'left: ' + stop.x + 'px;'"
+            @click="setSliderIndex( stop.index )"
+        ></div>
+        <div :id="'slider-' + $props[ 'sliderId' ]" class="slider">
+            <div
+                class="slider-fill"
+                :style="'left: ' + sliderFillPosLeft +
+                    'px; width: ' + ( maxWidth - sliderFillPosLeft - sliderFillPosRight ) + 'px'"
+            ></div>
+            <div
+                v-for="stop in sliderStops"
+                :key="stop.index"
+                :class="'slider-stop-fill' + ( stop.index <= sliderIndex ? ' stop-filled' : '' )"
+                :style="'left: ' + stop.x + 'px;'"
+                @click="setSliderIndex( stop.index )"
+            ></div>
+        </div>
+    </div>
+</template>
+
+
+<style scoped>
+    .vue3-slider-notched {
+        position: relative;
+    }
+
+    .vue3-slider-notched .slider-knob {
+        background-color: var( --hover-color );
+        width: 25px;
+        height: 25px;
+        border-radius: 15px;
+        position: absolute;
+        z-index: 5;
+        top: -5px;
+        transition: left 0.5s;
+    }
+
+    .vue3-slider-notched .slider-knob.dragging {
+        transition: none;
+    }
+
+    .vue3-slider-notched .slider-drag-support {
+        width: 100%;
+        height: 100%;
+        border-radius: 50px;
+        background: none;
+        cursor: pointer;
+    }
+
+
+    .vue3-slider-notched .slider-drag-support.dragging {
+        position: fixed;
+        cursor: move;
+        top: 0;
+        left: 0;
+        height: 100vh;
+        width: 100vw;
+    }
+
+    .vue3-slider-notched .slider {
+        width: 100%;
+        height: 10px;
+        position: relative;
+        border-radius: 15px;
+        z-index: 2;
+        border: 2px var( --gray-color ) solid;
+        background-color: var( --background-color );
+    }
+
+    .vue3-slider-notched .slider-fill {
+        height: 10px;
+        position: absolute;
+        background-color: var( --slider-color );
+        transition: width 0.5s;
+    }
+
+    .vue3-slider-notched .slider-stop {
+        border-radius: 10px;
+        width: 20px;
+        height: 20px;
+        border: solid 2px var( --gray-color );
+        position: absolute;
+        top: -5px;
+        transition: background-color 0.5s;
+        cursor: pointer;
+    }
+
+    .vue3-slider-notched .slider-stop-fill {
+        border-radius: 10px;
+        width: 20px;
+        height: 20px;
+        border: none;
+        position: absolute;
+        top: -5px;
+        background-color: var( --background-color );
+        transition: background-color 0.5s;
+        cursor: pointer;
+    }
+
+    .vue3-slider-notched .stop-filled {
+        background-color: var( --slider-color );
+    }
+</style>
diff --git a/src/components/SingleSlider.vue b/src/components/SingleSlider.vue
new file mode 100644
index 0000000..473a0f4
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..389f01c
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,9 @@
+import DoubleSlider from './components/DoubleSlider.vue';
+import NotchedSlider from './components/NotchedSlider.vue';
+import SingleSlider from './components/SingleSlider.vue';
+
+export {
+    NotchedSlider,
+    SingleSlider,
+    DoubleSlider
+};
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..0f74120
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,7 @@
+import './style.css';
+import App from './App.vue';
+import {
+    createApp
+} from 'vue';
+
+createApp( App ).mount( '#app' );
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..aaeacf1
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,79 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..b4cb103
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,16 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": ["vite/client"],
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..6099fb5
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..4dc1770
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..f6c7e5f
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,31 @@
+import {
+    defineConfig
+} from 'vite';
+import dts from 'vite-plugin-dts';
+import {
+    resolve
+} from 'node:path';
+import vue from '@vitejs/plugin-vue';
+
+// https://vitejs.dev/config/
+export default defineConfig( {
+    'plugins': [
+        vue(),
+        dts()
+    ],
+    'build': {
+        'lib': {
+            'entry': resolve( __dirname, 'src/index.ts' ),
+            'name': 'TestComponent',
+            'fileName': 'test-component',
+        },
+        'rollupOptions': {
+            'external': [ 'vue' ],
+            'output': {
+                'globals': {
+                    'vue': 'Vue',
+                },
+            },
+        },
+    },
+} );