https://github.com/mzusin/react-round-slider/issues/3

mzusin · Nov 7, 2023 · 4f28d8b · 4f28d8b
1 parent 79d7877
commit 4f28d8b
Show file tree

Hide file tree

Showing 31 changed files with 133 additions and 97 deletions.
diff --git a/README.md b/README.md
@@ -147,6 +147,7 @@
 
 
 
+
 
 
 ## License

diff --git a/dist/mz-react-round-slider.esm.js b/dist/mz-react-round-slider.esm.js
diff --git a/dist/mz-react-round-slider.esm.js.map b/dist/mz-react-round-slider.esm.js.map
diff --git a/dist/mz-react-round-slider.min.js b/dist/mz-react-round-slider.min.js
diff --git a/dist/mz-react-round-slider.min.js.map b/dist/mz-react-round-slider.min.js.map
diff --git a/docs/css/styles.1694421606066.css → docs/css/styles.1699386604131.css b/docs/css/styles.1694421606066.css → docs/css/styles.1699386604131.css
diff --git a/docs/index.html b/docs/index.html
@@ -19,8 +19,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1694421606066.css" />
-  <!--<link rel="stylesheet" href="/js/index.1694421606066.css" />-->
+  <link rel="stylesheet" href="/css/styles.1699386604131.css" />
+  <!--<link rel="stylesheet" href="/js/index.1699386604131.css" />-->
 
 </head>
 <body class="font-josefin_sans text-lg text-gray-100 hp-bg dark" id="special-page">
@@ -400,6 +400,6 @@ <h2 class="mt-8 font-semibold text-sky-500">Free</h2>
 
 </div>
 
-  <script src="/js/index.1694421606066.js"></script>
+  <script src="/js/index.1699386604131.js"></script>
 </body>
 </html>
diff --git a/docs/js/index.1694421606066.js → docs/js/index.1699386604131.js b/docs/js/index.1694421606066.js → docs/js/index.1699386604131.js
diff --git a/docs/js/index.1694421606066.js.map → docs/js/index.1699386604131.js.map b/docs/js/index.1694421606066.js.map → docs/js/index.1699386604131.js.map
diff --git a/docs/pages/animation.html b/docs/pages/animation.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1694421606066.css" />
-  <!--<link rel="stylesheet" href="/js/index.1694421606066.css" />-->
+  <link rel="stylesheet" href="/css/styles.1699386604131.css" />
+  <!--<link rel="stylesheet" href="/js/index.1699386604131.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -220,6 +220,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1694421606066.js"></script>
+<script src="/js/index.1699386604131.js"></script>
 </body>
 </html>
diff --git a/docs/pages/basic-usage.html b/docs/pages/basic-usage.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1694421606066.css" />
-  <!--<link rel="stylesheet" href="/js/index.1694421606066.css" />-->
+  <link rel="stylesheet" href="/css/styles.1699386604131.css" />
+  <!--<link rel="stylesheet" href="/js/index.1699386604131.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -229,6 +229,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1694421606066.js"></script>
+<script src="/js/index.1699386604131.js"></script>
 </body>
 </html>
diff --git a/docs/pages/circle-gradient.html b/docs/pages/circle-gradient.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1694421606066.css" />
-  <!--<link rel="stylesheet" href="/js/index.1694421606066.css" />-->
+  <link rel="stylesheet" href="/css/styles.1699386604131.css" />
+  <!--<link rel="stylesheet" href="/js/index.1699386604131.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -254,6 +254,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1694421606066.js"></script>
+<script src="/js/index.1699386604131.js"></script>
 </body>
 </html>
diff --git a/docs/pages/connection.html b/docs/pages/connection.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1694421606066.css" />
-  <!--<link rel="stylesheet" href="/js/index.1694421606066.css" />-->
+  <link rel="stylesheet" href="/css/styles.1699386604131.css" />
+  <!--<link rel="stylesheet" href="/js/index.1699386604131.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -243,6 +243,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1694421606066.js"></script>
+<script src="/js/index.1699386604131.js"></script>
 </body>
 </html>
diff --git a/docs/pages/custom-pointer-shape.html b/docs/pages/custom-pointer-shape.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1694421606066.css" />
-  <!--<link rel="stylesheet" href="/js/index.1694421606066.css" />-->
+  <link rel="stylesheet" href="/css/styles.1699386604131.css" />
+  <!--<link rel="stylesheet" href="/js/index.1699386604131.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -234,6 +234,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1694421606066.js"></script>
+<script src="/js/index.1699386604131.js"></script>
 </body>
 </html>
diff --git a/docs/pages/data-settings.html b/docs/pages/data-settings.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1694421606066.css" />
-  <!--<link rel="stylesheet" href="/js/index.1694421606066.css" />-->
+  <link rel="stylesheet" href="/css/styles.1699386604131.css" />
+  <!--<link rel="stylesheet" href="/js/index.1699386604131.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -242,6 +242,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1694421606066.js"></script>
+<script src="/js/index.1699386604131.js"></script>
 </body>
 </html>
diff --git a/docs/pages/disabled-state.html b/docs/pages/disabled-state.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1694421606066.css" />
-  <!--<link rel="stylesheet" href="/js/index.1694421606066.css" />-->
+  <link rel="stylesheet" href="/css/styles.1699386604131.css" />
+  <!--<link rel="stylesheet" href="/js/index.1699386604131.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -229,6 +229,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1694421606066.js"></script>
+<script src="/js/index.1699386604131.js"></script>
 </body>
 </html>
diff --git a/docs/pages/individual-pointer-settings.html b/docs/pages/individual-pointer-settings.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1694421606066.css" />
-  <!--<link rel="stylesheet" href="/js/index.1694421606066.css" />-->
+  <link rel="stylesheet" href="/css/styles.1699386604131.css" />
+  <!--<link rel="stylesheet" href="/js/index.1699386604131.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -278,6 +278,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1694421606066.js"></script>
+<script src="/js/index.1699386604131.js"></script>
 </body>
 </html>
diff --git a/docs/pages/path-settings.html b/docs/pages/path-settings.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1694421606066.css" />
-  <!--<link rel="stylesheet" href="/js/index.1694421606066.css" />-->
+  <link rel="stylesheet" href="/css/styles.1699386604131.css" />
+  <!--<link rel="stylesheet" href="/js/index.1699386604131.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -269,6 +269,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1694421606066.js"></script>
+<script src="/js/index.1699386604131.js"></script>
 </body>
 </html>
diff --git a/docs/pages/pointer-and-connection-gradient.html b/docs/pages/pointer-and-connection-gradient.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1694421606066.css" />
-  <!--<link rel="stylesheet" href="/js/index.1694421606066.css" />-->
+  <link rel="stylesheet" href="/css/styles.1699386604131.css" />
+  <!--<link rel="stylesheet" href="/js/index.1699386604131.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -238,6 +238,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1694421606066.js"></script>
+<script src="/js/index.1699386604131.js"></script>
 </body>
 </html>
diff --git a/docs/pages/pointer-settings.html b/docs/pages/pointer-settings.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1694421606066.css" />
-  <!--<link rel="stylesheet" href="/js/index.1694421606066.css" />-->
+  <link rel="stylesheet" href="/css/styles.1699386604131.css" />
+  <!--<link rel="stylesheet" href="/js/index.1699386604131.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -268,6 +268,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1694421606066.js"></script>
+<script src="/js/index.1699386604131.js"></script>
 </body>
 </html>
diff --git a/docs/pages/pointers-overlap.html b/docs/pages/pointers-overlap.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1694421606066.css" />
-  <!--<link rel="stylesheet" href="/js/index.1694421606066.css" />-->
+  <link rel="stylesheet" href="/css/styles.1699386604131.css" />
+  <!--<link rel="stylesheet" href="/js/index.1699386604131.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -210,6 +210,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1694421606066.js"></script>
+<script src="/js/index.1699386604131.js"></script>
 </body>
 </html>
diff --git a/docs/pages/range-dragging.html b/docs/pages/range-dragging.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1694421606066.css" />
-  <!--<link rel="stylesheet" href="/js/index.1694421606066.css" />-->
+  <link rel="stylesheet" href="/css/styles.1699386604131.css" />
+  <!--<link rel="stylesheet" href="/js/index.1699386604131.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -196,6 +196,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1694421606066.js"></script>
+<script src="/js/index.1699386604131.js"></script>
 </body>
 </html>
diff --git a/docs/pages/text-values.html b/docs/pages/text-values.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1694421606066.css" />
-  <!--<link rel="stylesheet" href="/js/index.1694421606066.css" />-->
+  <link rel="stylesheet" href="/css/styles.1699386604131.css" />
+  <!--<link rel="stylesheet" href="/js/index.1699386604131.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -262,6 +262,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1694421606066.js"></script>
+<script src="/js/index.1699386604131.js"></script>
 </body>
 </html>
diff --git a/docs/pages/ticks-settings.html b/docs/pages/ticks-settings.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1694421606066.css" />
-  <!--<link rel="stylesheet" href="/js/index.1694421606066.css" />-->
+  <link rel="stylesheet" href="/css/styles.1699386604131.css" />
+  <!--<link rel="stylesheet" href="/js/index.1699386604131.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -266,6 +266,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1694421606066.js"></script>
+<script src="/js/index.1699386604131.js"></script>
 </body>
 </html>
diff --git a/docs/pages/ticks-values.html b/docs/pages/ticks-values.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1694421606066.css" />
-  <!--<link rel="stylesheet" href="/js/index.1694421606066.css" />-->
+  <link rel="stylesheet" href="/css/styles.1699386604131.css" />
+  <!--<link rel="stylesheet" href="/js/index.1699386604131.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -280,6 +280,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1694421606066.js"></script>
+<script src="/js/index.1699386604131.js"></script>
 </body>
 </html>
diff --git a/docs/pages/values-list.html b/docs/pages/values-list.html
@@ -16,8 +16,8 @@
   <link id="favicon-32" rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32.png" />
   <link id="favicon-16" rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16.png" />
 
-  <link rel="stylesheet" href="/css/styles.1694421606066.css" />
-  <!--<link rel="stylesheet" href="/js/index.1694421606066.css" />-->
+  <link rel="stylesheet" href="/css/styles.1699386604131.css" />
+  <!--<link rel="stylesheet" href="/js/index.1699386604131.css" />-->
 
 </head>
 <body class="h-screen flex flex-col font-roboto bg-white dark:bg-slate-900 dark:text-slate-100">
@@ -225,6 +225,6 @@
   </div>
 </footer>-->
 
-<script src="/js/index.1694421606066.js"></script>
+<script src="/js/index.1699386604131.js"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mz-react-round-slider",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Multi-Pointer React Round Slider",
   "type": "module",
   "types": "./dist/index.d.ts",

diff --git a/src/core/domain/data-provider.ts b/src/core/domain/data-provider.ts
@@ -47,8 +47,8 @@ export const getData = (setting: ISettings) : IData => {
     const pathEndAngle = getNumber(setting.pathEndAngle, DEFAULT_PATH_END_ANGLE);
     const isClosedShape = mod(pathStartAngle, 360) === mod(pathEndAngle, 360);
 
-    const stepAngleDeg = step * 360 / (max - min);
-    const arrowStepAngleDeg = arrowStep * 360 / (max - min);
+    const stepAngleDeg = step * (pathEndAngle - pathStartAngle) / (max - min);
+    const arrowStepAngleDeg = arrowStep * (pathEndAngle - pathStartAngle) / (max - min);
 
     return {
         min,