feat: Add option to supports RTL mode

docs/index.html

@@ -42,6 +42,11 @@ <h1>RangeTouch</h1>
                 <input type="range" id="example0" class="js-example" />
             </div>
 
+            <div class="section example hidden-no-touch">
+                <label for="example0" class="color-good">RangeTouch (RTL) <span class="sr-only">example slider</span></label>
+                <input type="range" id="example2" class="js-example" dir="rtl" />
+            </div>
+
             <div class="action">
                 <a
                     href="https://github.com/sampotts/rangetouch"

docs/src/js/docs.js

@@ -40,5 +40,5 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     // Set range thumb size
-    RangeTouch.setup('.js-example', { thumbWidth: 20 });
+    RangeTouch.setup('.js-example', { thumbWidth: 20, supportsRTL: true });
 });

readme.md

@@ -73,6 +73,7 @@ This will return an array of RangeTouch instances that it setup.
 | addCSS     | Boolean | `true`  | Whether to inject CSS to improve the usability of the inputs. It's recommended you add this yourself if you don't want RangeTouch to take care of it.                                                                                                                                                                                                                          |
 | thumbWidth | Integer | `15`    | This value is used as part of the calculation to determine the value the users selects when touching the range track. Unfortunately as JavaScript can't access the shadow DOM, this value can't be automatically determined. I would recommend customisation (and setting the size of the thumb) given all OS and browser combinations seem to render the control differently. |
 | watch      | Boolean | `true`  | Watch for new elements added to the DOM that match your string selector. **Note**: This only applies when using the multiple instance `RangeTouch` setup method and also requires a string selector as the first argument.                                                                                                                                                     |
+| supportsRTL      | Boolean | `false`  | Check if the range input is in rtl mode and adjust behavior accordingly.                                                                                                                                                    |
 
 ## API
 

src/js/config.js

@@ -2,6 +2,7 @@ const defaults = {
     addCSS: true, // Add CSS to the element to improve usability (required here or in your CSS!)
     thumbWidth: 15, // The width of the thumb handle
     watch: true, // Watch for new elements that match a string target
+    supportsRTL: false, // Supports rtl range input behavior
 };
 
-export default defaults;
+export default defaults;

src/js/rangetouch.js

@@ -10,6 +10,7 @@ import { matches } from './utils/css';
 import { trigger } from './utils/events';
 import is from './utils/is';
 import { round } from './utils/numbers';
+import { isElementRTL } from './utils/element';
 
 class RangeTouch {
     /**
@@ -147,6 +148,7 @@ class RangeTouch {
         const min = parseFloat(input.getAttribute('min')) || 0;
         const max = parseFloat(input.getAttribute('max')) || 100;
         const step = parseFloat(input.getAttribute('step')) || 1;
+        const isRTL = this.config.supportsRTL && isElementRTL(input);
         const delta = max - min;
 
         // Calculate percentage
@@ -172,7 +174,11 @@ class RangeTouch {
         }
 
         // Find the closest step to the mouse position
-        return min + round(delta * (percent / 100), step);
+        if (isRTL) {
+            return max - round(delta * (percent / 100), step);
+        } else {
+            return min + round(delta * (percent / 100), step);
+        }
     }
 
     /**

src/js/utils/element.js

@@ -0,0 +1,6 @@
+export function isElementRTL(element) {
+    if (!element) return false;
+    return document.dir === 'rtl' || element.dir === 'rtl' || window.getComputedStyle(element).direction === 'rtl';
+}
+
+export default { isElementRTL };