From 2313a4e8c9d0096803a2bebd9a62179010ab4b2d Mon Sep 17 00:00:00 2001
From: matthewcsimpson <mcsimpson@gmail.com>
Date: Thu, 19 Mar 2026 11:23:59 -0700
Subject: [PATCH 01/15] feat: rangeslidersimple

---
 Dist/Functional/RangeSlider.js       | 903 ++++++++++++---------------
 Dist/Functional/RangeSliderSimple.js | 485 ++++++++++++++
 README.md                            |  15 +
 __tests__/RangeSlider.test.js        |  50 ++
 __tests__/RangeSliderSimple.test.js  |  58 ++
 docs/Functional/CookieConsent.md     |  14 +-
 docs/Functional/CopyToClipboard.md   |  15 +-
 docs/Functional/CountUp.md           |  14 +-
 docs/Functional/DateCountDown.md     |  15 +-
 docs/Functional/FormCheck.md         |  14 +-
 docs/Functional/FormatNumbers.md     |  15 +-
 docs/Functional/Marquee.md           |  15 +-
 docs/Functional/RangeSlider.md       |  20 +-
 docs/Functional/RangeSliderSimple.md |  77 +++
 docs/Functional/ReadTime.md          |  15 +-
 docs/Functional/ShareLink.md         |  12 +-
 docs/WebflowOnly/CMSFilter.md        |  24 +-
 docs/WebflowOnly/CMSSelect.md        |  19 +-
 docs/WebflowOnly/HideContainer.md    |  13 +-
 docs/WebflowOnly/MirrorClick.md      |  14 +-
 docs/WebflowOnly/RenderStatic.md     |  12 +-
 docs/WebflowOnly/TabsSlider.md       |  12 +-
 package-lock.json                    |   4 +-
 23 files changed, 1310 insertions(+), 525 deletions(-)
 create mode 100644 Dist/Functional/RangeSliderSimple.js
 create mode 100644 __tests__/RangeSlider.test.js
 create mode 100644 __tests__/RangeSliderSimple.test.js
 create mode 100644 docs/Functional/RangeSliderSimple.md

diff --git a/Dist/Functional/RangeSlider.js b/Dist/Functional/RangeSlider.js
index 6d8dd77..664e8e6 100644
--- a/Dist/Functional/RangeSlider.js
+++ b/Dist/Functional/RangeSlider.js
@@ -5,150 +5,183 @@
  * (c) 2023 Jorge Cortez
  * MIT License
  * https://github.com/JorchCortez/Weblfow-Trickery
+ *
+ * Self-contained: no separate shared script required (backward compatible with single-tag embeds).
  */
 
+'use strict';
+
+/** @private Core helpers (IIFE keeps globals clean if RangeSliderSimple.js is also on the page) */
+var __WT_RANGE_SLIDER_CORE = (function () {
+    function validateNumber(value) {
+        const num = parseFloat(value);
+        if (isNaN(num)) {
+            throw new Error(`Invalid number value: ${value}`);
+        }
+        return num;
+    }
+
+    function formatNumber(number) {
+        return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    }
+
+    function readSliderConfig(sliderEl, prefix) {
+        const minAttr = sliderEl.getAttribute(`${prefix}-min`);
+        const sliderMin = minAttr !== null ? validateNumber(minAttr) : 0;
+
+        const maxAttr = sliderEl.getAttribute(`${prefix}-max`);
+        const sliderMax = maxAttr !== null ? validateNumber(maxAttr) : 100;
+
+        const stepsAttr = sliderEl.getAttribute(`${prefix}-steps`);
+        const sliderSteps = stepsAttr !== null ? validateNumber(stepsAttr) : 1;
+
+        const minDiffAttr = sliderEl.getAttribute(`${prefix}-mindifference`);
+        const minDifference = minDiffAttr !== null ? validateNumber(minDiffAttr) : sliderSteps;
+
+        return {
+            sliderMin,
+            sliderMax,
+            sliderSteps,
+            minDifference,
+            rightSuffix: sliderEl.getAttribute(`${prefix}-rightsuffix`) || null,
+            defaultSuffix: sliderEl.getAttribute(`${prefix}-defaultsuffix`) || null,
+            shouldFormatNumber: sliderEl.getAttribute(`${prefix}-formatnumber`) || null,
+        };
+    }
+
+    function constrainLeftValue(rawValue, rightValueStr, minDifference) {
+        return Math.min(
+            parseInt(rawValue, 10),
+            parseInt(rightValueStr, 10) - minDifference,
+        );
+    }
+
+    function constrainRightValue(rawValue, leftValueStr, minDifference) {
+        return Math.max(
+            parseInt(rawValue, 10),
+            parseInt(leftValueStr, 10) + minDifference,
+        );
+    }
+
+    function setNativeTextInputValue(input, constrainedValue, suspendBegin, suspendEnd) {
+        if (!input) return;
+        const valueProp = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+        suspendBegin();
+        valueProp.set.call(input, constrainedValue);
+        suspendEnd();
+    }
+
+    function formatStartDisplayContent(constrainedValue, shouldFormatNumberAttr) {
+        const displayLeft =
+            shouldFormatNumberAttr === 'true'
+                ? formatNumber(constrainedValue)
+                : constrainedValue;
+        return String(displayLeft);
+    }
+
+    function formatEndDisplayContent(
+        constrainedValue,
+        rawInputValue,
+        sliderMax,
+        shouldFormatNumberAttr,
+        rightSuffix,
+        defaultSuffix,
+    ) {
+        let finalDisplay =
+            shouldFormatNumberAttr === 'true'
+                ? formatNumber(constrainedValue)
+                : constrainedValue;
+        const rawNum = parseFloat(rawInputValue);
+        if (rightSuffix && !isNaN(rawNum) && rawNum >= sliderMax) {
+            return `${finalDisplay}${rightSuffix}`;
+        }
+        if (defaultSuffix) {
+            return `${finalDisplay}${defaultSuffix}`;
+        }
+        return String(finalDisplay);
+    }
+
+    function hookInputValueSync(input, handler, isSuspended) {
+        if (!input) return;
+        const valueProp = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+        try {
+            Object.defineProperty(input, 'value', {
+                get() {
+                    return valueProp.get.call(this);
+                },
+                set(v) {
+                    valueProp.set.call(this, v);
+                    if (!isSuspended()) {
+                        handler(v);
+                    }
+                },
+                configurable: true,
+                enumerable: true,
+            });
+        } catch (err) {
+            // Fallback: rely on 'input'/'change' listeners if defineProperty fails
+        }
+    }
+
+    function dispatchInputEvent(element) {
+        if (element) {
+            element.dispatchEvent(new Event('input', { bubbles: true }));
+        }
+    }
+
+    return {
+        readSliderConfig,
+        constrainLeftValue,
+        constrainRightValue,
+        setNativeTextInputValue,
+        formatStartDisplayContent,
+        formatEndDisplayContent,
+        hookInputValueSync,
+        dispatchInputEvent,
+    };
+}());
+
 /**
  * @file RangeSlider.js
  * @description A customizable dual-handle range slider for selecting value ranges.
- * 
- * Key Features:
- * - Dual handles for selecting a range of values
- * - Real-time visual updates
- * - Form integration with input fields
- * - Display elements for current values
- * - Customizable thumbs with SVG/image support
- * - Mutation observer support for programmatic value changes
- * - Configurable min/max values and step size
- * 
- * Required Attributes:
- * - wt-rangeslider-element="slider-wrapper": Container element
- * - wt-rangeslider-element="slider": Main slider element
- * - wt-rangeslider-element="input-left": Left range input
- * - wt-rangeslider-element="input-right": Right range input
- * - wt-rangeslider-element="thumb-left": Left thumb element
- * - wt-rangeslider-element="thumb-right": Right thumb element
- * - wt-rangeslider-element="range": Range indicator element
- * 
- * Optional Attributes:
- * - wt-rangeslider-min: Minimum value (default: 0)
- * - wt-rangeslider-max: Maximum value (default: 100)
- * - wt-rangeslider-steps: Step size (default: 1)
- * 
- * Optional Elements:
- * - [wt-rangeslider-range="from"]: Form input for start value
- * - [wt-rangeslider-range="to"]: Form input for end value
- * - [wt-rangeslider-display="from"]: Display element for start value
- * - [wt-rangeslider-display="to"]: Display element for end value
- * 
- * @example
- * <!-- Basic Implementation -->
- * <div wt-rangeslider-element="slider-wrapper">
- *   <!-- Optional Display Elements -->
- *   <div wt-rangeslider-display="from">0</div>
- *   <div wt-rangeslider-display="to">100</div>
- *   
- *   <!-- Optional Form Inputs -->
- *   <input wt-rangeslider-range="from" type="text">
- *   <input wt-rangeslider-range="to" type="text">
- *   
- *   <!-- Required Slider Structure -->
- *   <div wt-rangeslider-element="slider"
- *        wt-rangeslider-min="0"
- *        wt-rangeslider-max="100"
- *        wt-rangeslider-steps="1">
- *     <div wt-rangeslider-element="range"></div>
- *     <div wt-rangeslider-element="thumb-left"></div>
- *     <div wt-rangeslider-element="thumb-right"></div>
- *     <input type="range" wt-rangeslider-element="input-left">
- *     <input type="range" wt-rangeslider-element="input-right">
- *   </div>
- * </div>
- * 
- * @example
- * <!-- Custom Thumb Implementation -->
- * <div wt-rangeslider-element="slider-wrapper">
- *   <div wt-rangeslider-element="slider">
- *     <div wt-rangeslider-element="range"></div>
- *     <div wt-rangeslider-element="thumb-left">
- *       <svg width="20" height="20">
- *         <circle cx="10" cy="10" r="8" fill="white" stroke="black"/>
- *       </svg>
- *     </div>
- *     <div wt-rangeslider-element="thumb-right">
- *       <svg width="20" height="20">
- *         <circle cx="10" cy="10" r="8" fill="white" stroke="black"/>
- *       </svg>
- *     </div>
- *     <input type="range" wt-rangeslider-element="input-left">
- *     <input type="range" wt-rangeslider-element="input-right">
- *   </div>
- * </div>
- * 
- * Behavior:
- * 1. Slider updates in real-time during interaction
- * 2. Form inputs update simultaneously with slider movement
- * 3. Display elements update in real-time
- * 4. Programmatic changes to form inputs trigger slider updates
- * 5. Values are constrained within min/max range
- * 6. Left value cannot exceed right value minus step size
- * 7. Right value cannot be less than left value plus step size
+ *
+ * For native-only handles (no custom thumbs), see RangeSliderSimple.js.
  */
 
 /**
  * @class RangeSlider
- * @classdesc Creates a range slider component with two handles for selecting a range of values.
- * The component supports both visual slider interaction and direct input of values.
- *
- * @param {HTMLElement} wrapper - The container element for the range slider
- * @throws {Error} If required elements or attributes are missing
+ * @param {HTMLElement} wrapper
  */
 class RangeSlider {
-/**
- * @constructor
- * @param {HTMLElement} wrapper - The wrapper element containing all slider components
- */
-constructor(wrapper) {
-    try {
-    this.wrapper = wrapper;
-    this.slider = wrapper.querySelector('[wt-rangeslider-element="slider"]');
-    // Guard flag to avoid recursive updates when syncing external inputs
-    this.__suspendExternalSync = false;
+    constructor(wrapper) {
+        try {
+            this.rs = __WT_RANGE_SLIDER_CORE;
 
-    if (!this.slider) {
-        throw new Error('Slider element not found within wrapper');
-    }
-
-    // Add required styles
-    this.addStyles();
-
-    // Initialize configuration
-    this.initConfig();
+            this.wrapper = wrapper;
+            this.slider = wrapper.querySelector('[wt-rangeslider-element="slider"]');
+            this.__suspendExternalSync = false;
 
-    // Initialize elements
-    this.initElements();
-
-    // Setup initial state
-    this.initState();
+            if (!this.slider) {
+                throw new Error('Slider element not found within wrapper');
+            }
 
-    // Setup event listeners
-    this.setupEventListeners();
-    } catch (err) {
-    console.error(`RangeSlider initialization failed: ${err.message}`);
+            this.addStyles();
+            this.initConfig();
+            this.initElements();
+            this.initState();
+            this.setupEventListeners();
+        } catch (err) {
+            console.error(`RangeSlider initialization failed: ${err.message}`);
+        }
     }
-}
 
-/**
- * Adds required styles for proper thumb alignment
- * @private
- */
-addStyles() {
-    // Inject styles once per document
-    const existing = document.getElementById('wt-rangeslider-styles');
-    if (existing) return;
-
-    const style = document.createElement('style');
-    style.id = 'wt-rangeslider-styles';
-    style.textContent = `
+    addStyles() {
+        const existing = document.getElementById('wt-rangeslider-styles');
+        if (existing) return;
+
+        const style = document.createElement('style');
+        style.id = 'wt-rangeslider-styles';
+        style.textContent = `
     [wt-rangeslider-element="slider"] {
         position: relative;
     }
@@ -195,430 +228,292 @@ addStyles() {
         will-change: transform;
     }
     `;
-    document.head.appendChild(style);
-}
+        document.head.appendChild(style);
+    }
 
-/**
- * Initialize slider configuration from attributes
- * @private
- */
-initConfig() {
-    const minAttr = this.slider.getAttribute('wt-rangeslider-min');
-    this.sliderMin = minAttr !== null ? this.validateNumber(minAttr) : 0;
-    
-    const maxAttr = this.slider.getAttribute('wt-rangeslider-max');
-    this.sliderMax = maxAttr !== null ? this.validateNumber(maxAttr) : 100;
-    
-    const stepsAttr = this.slider.getAttribute('wt-rangeslider-steps');
-    this.sliderSteps = stepsAttr !== null ? this.validateNumber(stepsAttr) : 1;
-    
-    // Minimum difference between left and right values
-    const minDiffAttr = this.slider.getAttribute('wt-rangeslider-mindifference');
-    this.minDifference = minDiffAttr !== null ? this.validateNumber(minDiffAttr) : this.sliderSteps;
-
-    // Show preffix
-    this.rightSuffix =
-    this.slider.getAttribute('wt-rangeslider-rightsuffix') || null;
-    // Show preffix
-    this.defaultSuffix =
-    this.slider.getAttribute('wt-rangeslider-defaultsuffix') || null;
-    // Show preffix
-    this.shouldFormatNumber =
-    this.slider.getAttribute('wt-rangeslider-formatnumber') || null;
-}
+    initConfig() {
+        const cfg = this.rs.readSliderConfig(this.slider, 'wt-rangeslider');
+        this.sliderMin = cfg.sliderMin;
+        this.sliderMax = cfg.sliderMax;
+        this.sliderSteps = cfg.sliderSteps;
+        this.minDifference = cfg.minDifference;
+        this.rightSuffix = cfg.rightSuffix;
+        this.defaultSuffix = cfg.defaultSuffix;
+        this.shouldFormatNumber = cfg.shouldFormatNumber;
+    }
 
-/**
- * Initialize DOM elements
- * @private
- */
-initElements() {
-    // Range inputs (form elements)
-    this.rangeStart = this.wrapper.querySelector(
-    '[wt-rangeslider-range="from"]',
-    );
-    this.rangeEnd = this.wrapper.querySelector('[wt-rangeslider-range="to"]');
-
-    // Display elements
-    this.displayStart = this.wrapper.querySelector(
-    '[wt-rangeslider-display="from"]',
-    );
-    this.displayEnd = this.wrapper.querySelector(
-    '[wt-rangeslider-display="to"]',
-    );
-
-    // Slider elements
-    this.inputLeft = this.slider.querySelector(
-    '[wt-rangeslider-element="input-left"]',
-    );
-    this.inputRight = this.slider.querySelector(
-    '[wt-rangeslider-element="input-right"]',
-    );
-    this.thumbLeft = this.slider.querySelector(
-    '[wt-rangeslider-element="thumb-left"]',
-    );
-    this.thumbRight = this.slider.querySelector(
-    '[wt-rangeslider-element="thumb-right"]',
-    );
-    this.range = this.slider.querySelector('[wt-rangeslider-element="range"]');
-
-    this.validateRequiredElements();
-    this.setupThumbStyles();
-}
+    initElements() {
+        this.rangeStart = this.wrapper.querySelector(
+            '[wt-rangeslider-range="from"]',
+        );
+        this.rangeEnd = this.wrapper.querySelector('[wt-rangeslider-range="to"]');
+
+        this.displayStart = this.wrapper.querySelector(
+            '[wt-rangeslider-display="from"]',
+        );
+        this.displayEnd = this.wrapper.querySelector(
+            '[wt-rangeslider-display="to"]',
+        );
+
+        this.inputLeft = this.slider.querySelector(
+            '[wt-rangeslider-element="input-left"]',
+        );
+        this.inputRight = this.slider.querySelector(
+            '[wt-rangeslider-element="input-right"]',
+        );
+        this.thumbLeft = this.slider.querySelector(
+            '[wt-rangeslider-element="thumb-left"]',
+        );
+        this.thumbRight = this.slider.querySelector(
+            '[wt-rangeslider-element="thumb-right"]',
+        );
+        this.range = this.slider.querySelector('[wt-rangeslider-element="range"]');
+
+        this.validateRequiredElements();
+        this.setupThumbStyles();
+    }
 
-/**
- * Sets up proper thumb styling to ensure clickable areas align with visuals
- * @private
- */
-setupThumbStyles() {
-    const setupThumb = (thumb, input) => {
-    // Ensure the input's thumb aligns with our custom thumb
-    const thumbWidth = thumb.offsetWidth || parseInt(getComputedStyle(thumb).width) || 20;
-    input.style.setProperty('--thumb-width', `${thumbWidth}px`);
-    
-    // Apply styles to ensure proper positioning and hit areas
-    thumb.style.position = 'absolute';
-    thumb.style.pointerEvents = 'none';
-    
-    // Create a custom property for the thumb offset
-    this.slider.style.setProperty('--thumb-offset', `${thumbWidth / 2}px`);
-    };
+    setupThumbStyles() {
+        const setupThumb = (thumb, input) => {
+            const thumbWidth =
+                thumb.offsetWidth ||
+                parseInt(getComputedStyle(thumb).width, 10) ||
+                20;
+            input.style.setProperty('--thumb-width', `${thumbWidth}px`);
 
-    setupThumb(this.thumbLeft, this.inputLeft);
-    setupThumb(this.thumbRight, this.inputRight);
-}
+            thumb.style.position = 'absolute';
+            thumb.style.pointerEvents = 'none';
 
-/**
- * Initialize slider state
- * @private
- */
-initState() {
-    // Configure range inputs
-    [this.inputLeft, this.inputRight].forEach((input) => {
-    input.setAttribute('min', this.sliderMin);
-    input.setAttribute('max', this.sliderMax);
-    input.setAttribute('step', this.sliderSteps);
-    input.setAttribute('formnovalidate', '');
-    input.setAttribute('data-form-ignore', '');
-    });
-
-    // Set initial values from range inputs if they exist
-    if (this.rangeStart && this.rangeStart.value) {
-    this.updateLeftValues(this.rangeStart.value);
-    } else {
-    this.updateLeftValues(this.sliderMin);
-    }
+            this.slider.style.setProperty('--thumb-offset', `${thumbWidth / 2}px`);
+        };
 
-    if (this.rangeEnd && this.rangeEnd.value) {
-    this.updateRightValues(this.rangeEnd.value);
-    } else {
-    this.updateRightValues(this.sliderMax);
+        setupThumb(this.thumbLeft, this.inputLeft);
+        setupThumb(this.thumbRight, this.inputRight);
     }
-}
 
-/**
- * Formats a number with commas as thousand separators
- * @param {number} number - The number to format
- * @returns {string} The formatted number string
- * @private
- */
-formatNumber(number) {
-    return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-}
+    initState() {
+        [this.inputLeft, this.inputRight].forEach((input) => {
+            input.setAttribute('min', this.sliderMin);
+            input.setAttribute('max', this.sliderMax);
+            input.setAttribute('step', this.sliderSteps);
+            input.setAttribute('formnovalidate', '');
+            input.setAttribute('data-form-ignore', '');
+        });
 
-/**
- * Updates all visual elements and values for the left handle
- * @private
- */
-updateLeftValues(value) {
-    const constrainedValue = Math.min(
-    parseInt(value),
-    parseInt(this.inputRight.value) - this.minDifference,
-    );
-
-    // Update slider input
-    this.inputLeft.value = constrainedValue;
-
-    // Update form input
-    if (this.rangeStart) {
-    // Avoid recursive reaction to our own programmatic updates
-    const valueProp = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
-    this.__suspendExternalSync = true;
-    valueProp.set.call(this.rangeStart, constrainedValue);
-    this.__suspendExternalSync = false;
+        if (this.rangeStart && this.rangeStart.value) {
+            this.updateLeftValues(this.rangeStart.value);
+        } else {
+            this.updateLeftValues(this.sliderMin);
+        }
+
+        if (this.rangeEnd && this.rangeEnd.value) {
+            this.updateRightValues(this.rangeEnd.value);
+        } else {
+            this.updateRightValues(this.sliderMax);
+        }
     }
 
-    // Update display
-    if (this.displayStart) {
-    const displayLeft = this.shouldFormatNumber === 'true' ? this.formatNumber(constrainedValue) : constrainedValue;
-    this.displayStart.textContent = String(displayLeft);
+    updateLeftValues(value) {
+        const constrainedValue = this.rs.constrainLeftValue(
+            value,
+            this.inputRight.value,
+            this.minDifference,
+        );
+
+        this.inputLeft.value = constrainedValue;
+
+        if (this.rangeStart) {
+            this.rs.setNativeTextInputValue(
+                this.rangeStart,
+                constrainedValue,
+                () => {
+                    this.__suspendExternalSync = true;
+                },
+                () => {
+                    this.__suspendExternalSync = false;
+                },
+            );
+        }
+
+        if (this.displayStart) {
+            this.displayStart.textContent = this.rs.formatStartDisplayContent(
+                constrainedValue,
+                this.shouldFormatNumber,
+            );
+        }
+
+        this.updateThumbPosition(
+            this.inputLeft,
+            this.thumbLeft,
+            this.range,
+            'left',
+        );
     }
 
-    // Update visual position
-    this.updateThumbPosition(
-    this.inputLeft,
-    this.thumbLeft,
-    this.range,
-    'left',
-    );
-}
-
-/**
- * Updates all visual elements and values for the right handle
- * @private
- */
-updateRightValues(value) {
-    const constrainedValue = Math.max(
-    parseInt(value),
-    parseInt(this.inputLeft.value) + this.minDifference,
-    );
-
-    // Update slider input
-    this.inputRight.value = constrainedValue;
-
-    // Update form input
-    if (this.rangeEnd) {
-    // Avoid recursive reaction to our own programmatic updates
-    const valueProp = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
-    this.__suspendExternalSync = true;
-    valueProp.set.call(this.rangeEnd, constrainedValue);
-    this.__suspendExternalSync = false;
+    updateRightValues(value) {
+        const constrainedValue = this.rs.constrainRightValue(
+            value,
+            this.inputLeft.value,
+            this.minDifference,
+        );
+
+        this.inputRight.value = constrainedValue;
+
+        if (this.rangeEnd) {
+            this.rs.setNativeTextInputValue(
+                this.rangeEnd,
+                constrainedValue,
+                () => {
+                    this.__suspendExternalSync = true;
+                },
+                () => {
+                    this.__suspendExternalSync = false;
+                },
+            );
+        }
+
+        if (this.displayEnd) {
+            this.displayEnd.textContent = this.rs.formatEndDisplayContent(
+                constrainedValue,
+                value,
+                this.sliderMax,
+                this.shouldFormatNumber,
+                this.rightSuffix,
+                this.defaultSuffix,
+            );
+        }
+
+        this.updateThumbPosition(
+            this.inputRight,
+            this.thumbRight,
+            this.range,
+            'right',
+        );
     }
 
-    // Update display
-    if (this.displayEnd) {
-    let finalDisplay = this.shouldFormatNumber === 'true' ? this.formatNumber(constrainedValue) : constrainedValue;
-
-    if (this.rightSuffix && value >= this.sliderMax) {
-        this.displayEnd.textContent = `${finalDisplay}${this.rightSuffix}`;
-    } else if (this.defaultSuffix) {
-        this.displayEnd.textContent = `${finalDisplay}${this.defaultSuffix}`;
-    } else {
-        this.displayEnd.textContent = String(finalDisplay);
-    }
-    }
+    setupEventListeners() {
+        this.inputLeft.addEventListener('input', () => {
+            this.updateLeftValues(this.inputLeft.value);
+            if (this.rangeStart) {
+                this.rs.dispatchInputEvent(this.rangeStart);
+            }
+        });
 
-    // Update visual position
-    this.updateThumbPosition(
-    this.inputRight,
-    this.thumbRight,
-    this.range,
-    'right',
-    );
-}
+        this.inputRight.addEventListener('input', () => {
+            this.updateRightValues(this.inputRight.value);
+            if (this.rangeEnd) {
+                this.rs.dispatchInputEvent(this.rangeEnd);
+            }
+        });
 
-/**
- * Sets up event listeners for the range slider
- * @private
- */
-setupEventListeners() {
-    // Input events for the slider inputs
-    this.inputLeft.addEventListener('input', () => {
-    this.updateLeftValues(this.inputLeft.value);
-    if (this.rangeStart) {
-        this.triggerEvent(this.rangeStart);
+        if (this.rangeStart) {
+            this.rangeStart.addEventListener('input', (e) => {
+                this.updateLeftValues(e.target.value);
+            });
+            this.rangeStart.addEventListener('change', (e) => {
+                this.updateLeftValues(e.target.value);
+            });
+            this.rs.hookInputValueSync(
+                this.rangeStart,
+                (val) => {
+                    this.updateLeftValues(val);
+                },
+                () => this.__suspendExternalSync,
+            );
+        }
+
+        if (this.rangeEnd) {
+            this.rangeEnd.addEventListener('input', (e) => {
+                this.updateRightValues(e.target.value);
+            });
+            this.rangeEnd.addEventListener('change', (e) => {
+                this.updateRightValues(e.target.value);
+            });
+            this.rs.hookInputValueSync(
+                this.rangeEnd,
+                (val) => {
+                    this.updateRightValues(val);
+                },
+                () => this.__suspendExternalSync,
+            );
+        }
     }
-    });
 
-    this.inputRight.addEventListener('input', () => {
-    this.updateRightValues(this.inputRight.value);
-    if (this.rangeEnd) {
-        this.triggerEvent(this.rangeEnd);
-    }
-    });
-
-    // Watch for changes to the form inputs
-    if (this.rangeStart) {
-    // React to user typing immediately
-    this.rangeStart.addEventListener('input', (e) => {
-        this.updateLeftValues(e.target.value);
-    });
-    this.rangeStart.addEventListener('change', (e) => {
-        this.updateLeftValues(e.target.value);
-    });
-    // Hook into programmatic value assignments
-    this.hookInputValueSync(this.rangeStart, (val) => {
-        this.updateLeftValues(val);
-    });
+    updateThumbPosition(input, thumb, range, side) {
+        const min = parseInt(input.min, 10);
+        const max = parseInt(input.max, 10);
+        const current = parseInt(input.value, 10);
+        const percent = ((current - min) / (max - min)) * 100;
+
+        if (side === 'left') {
+            thumb.style.left = `${percent}%`;
+            thumb.style.transform = 'translateX(-50%)';
+            range.style.left = `${percent}%`;
+        } else {
+            thumb.style.right = `${100 - percent}%`;
+            thumb.style.transform = 'translateX(50%)';
+            range.style.right = `${100 - percent}%`;
+        }
     }
 
-    if (this.rangeEnd) {
-    // React to user typing immediately
-    this.rangeEnd.addEventListener('input', (e) => {
-        this.updateRightValues(e.target.value);
-    });
-    this.rangeEnd.addEventListener('change', (e) => {
-        this.updateRightValues(e.target.value);
-    });
-    // Hook into programmatic value assignments
-    this.hookInputValueSync(this.rangeEnd, (val) => {
-        this.updateRightValues(val);
-    });
+    setFrom(value) {
+        this.updateLeftValues(value);
     }
-}
 
-/**
- * Updates the position of a thumb element
- * @param {HTMLInputElement} input - The input element
- * @param {HTMLElement} thumb - The thumb element
- * @param {HTMLElement} range - The range element
- * @param {string} side - The side of the slider ('left' or 'right')
- * @private
- */
-updateThumbPosition(input, thumb, range, side) {
-    const min = parseInt(input.min);
-    const max = parseInt(input.max);
-    const current = parseInt(input.value);
-    const percent = ((current - min) / (max - min)) * 100;
-    
-    // Get the thumb's width to account for its dimensions
-    const thumbWidth = thumb.offsetWidth || parseInt(getComputedStyle(thumb).width) || 20;
-    const sliderWidth = this.slider.offsetWidth || parseInt(getComputedStyle(this.slider).width) || 1;
-    
-    // Calculate the percentage that represents half the thumb width
-    const thumbHalfPercent = (thumbWidth / sliderWidth) * 100;
-
-    if (side === 'left') {
-    thumb.style.left = `${percent}%`;
-    thumb.style.transform = 'translateX(-50%)';
-    range.style.left = `${percent}%`;
-    } else {
-    thumb.style.right = `${100 - percent}%`;
-    thumb.style.transform = 'translateX(50%)';
-    range.style.right = `${100 - percent}%`;
+    setTo(value) {
+        this.updateRightValues(value);
     }
-}
 
-/**
- * Validates that a value is a valid number
- * @param {string} value - The value to validate
- * @returns {number} The parsed number
- * @throws {Error} If the value is not a valid number
- */
-validateNumber(value) {
-    const num = parseFloat(value);
-    if (isNaN(num)) {
-    throw new Error(`Invalid number value: ${value}`);
+    setRange(from, to) {
+        this.updateLeftValues(from);
+        this.updateRightValues(to);
     }
-    return num;
-}
 
-/**
- * Triggers an input event on an element
- * @param {HTMLElement} element - The element to trigger the event on
- * @private
- */
-triggerEvent(element) {
-    if (element) {
-    element.dispatchEvent(new Event('input', { bubbles: true }));
+    reset() {
+        this.setRange(this.sliderMin, this.sliderMax);
     }
-}
 
-/**
- * Hook into a text input's value property to react to programmatic assignments
- * @param {HTMLInputElement} input - The input to hook
- * @param {(val: string|number) => void} handler - Handler to run on assignment
- * @private
- */
-hookInputValueSync(input, handler) {
-    if (!input) return;
-    const valueProp = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
-    const self = this;
-    try {
-        Object.defineProperty(input, 'value', {
-        get() {
-            return valueProp.get.call(this);
-        },
-        set(v) {
-            valueProp.set.call(this, v);
-            if (!self.__suspendExternalSync) {
-            handler(v);
+    validateRequiredElements() {
+        const requiredElements = {
+            inputLeft: this.inputLeft,
+            inputRight: this.inputRight,
+            thumbLeft: this.thumbLeft,
+            thumbRight: this.thumbRight,
+            range: this.range,
+        };
+
+        Object.entries(requiredElements).forEach(([name, element]) => {
+            if (!element) {
+                throw new Error(`Required element ${name} is missing`);
             }
-        },
-        configurable: true,
-        enumerable: true,
         });
-    } catch (err) {
-        // Fallback: rely on 'input'/'change' listeners if defineProperty fails
     }
 }
 
-/**
- * Public API: set left range value
- * @param {number|string} value
- */
-setFrom(value) {
-    this.updateLeftValues(value);
-}
-
-/**
- * Public API: set right range value
- * @param {number|string} value
- */
-setTo(value) {
-    this.updateRightValues(value);
-}
-
-/**
- * Public API: set both range values atomically and in correct order
- * @param {number|string} from
- * @param {number|string} to
- */
-setRange(from, to) {
-    this.updateLeftValues(from);
-    this.updateRightValues(to);
-}
-
-/**
- * Public API: reset slider to configured bounds
- */
-reset() {
-    this.setRange(this.sliderMin, this.sliderMax);
-}
-
-/**
- * Validates that all required elements are present
- * @private
- * @throws {Error} If any required element is missing
- */
-validateRequiredElements() {
-    const requiredElements = {
-    inputLeft: this.inputLeft,
-    inputRight: this.inputRight,
-    thumbLeft: this.thumbLeft,
-    thumbRight: this.thumbRight,
-    range: this.range,
-    };
-
-    Object.entries(requiredElements).forEach(([name, element]) => {
-    if (!element) {
-        throw new Error(`Required element ${name} is missing`);
-    }
-    });
-}
-}
-
-/**
- * Initialize all range sliders on the page
- */
 const initializeRangeSlider = () => {
     try {
         window.webtricks = window.webtricks || [];
-        const wrappers = document.querySelectorAll('[wt-rangeslider-element="slider-wrapper"]');
+        const wrappers = document.querySelectorAll(
+            '[wt-rangeslider-element="slider-wrapper"]',
+        );
 
         if (!wrappers || wrappers.length === 0) return;
 
-        wrappers.forEach(wrapper => {
+        wrappers.forEach((wrapper) => {
             const instance = new RangeSlider(wrapper);
-            window.webtricks.push({ 'RangeSlider': instance });
+            window.webtricks.push({ RangeSlider: instance });
         });
     } catch (err) {
         console.error(`RangeSlider initialization error: ${err.message}`);
     }
 };
 
-// Initialize on DOM ready
 if (/complete|interactive|loaded/.test(document.readyState)) {
     initializeRangeSlider();
 } else {
     window.addEventListener('DOMContentLoaded', initializeRangeSlider);
-}
\ No newline at end of file
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { RangeSlider, InitializeRangeSlider: initializeRangeSlider };
+}
diff --git a/Dist/Functional/RangeSliderSimple.js b/Dist/Functional/RangeSliderSimple.js
new file mode 100644
index 0000000..5a1d554
--- /dev/null
+++ b/Dist/Functional/RangeSliderSimple.js
@@ -0,0 +1,485 @@
+/*!
+ * WebTricks — RangeSliderSimple
+ * Dual native range inputs (no custom thumb DOM). Self-contained (single script tag).
+ * MIT License
+ */
+
+'use strict';
+
+/** @private Duplicated core logic (same behavior as RangeSlider) so this file has no shared dependency. */
+var __WT_RANGE_SLIDER_SIMPLE_CORE = (function () {
+    function validateNumber(value) {
+        const num = parseFloat(value);
+        if (isNaN(num)) {
+            throw new Error(`Invalid number value: ${value}`);
+        }
+        return num;
+    }
+
+    function formatNumber(number) {
+        return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    }
+
+    function readSliderConfig(sliderEl, prefix) {
+        const minAttr = sliderEl.getAttribute(`${prefix}-min`);
+        const sliderMin = minAttr !== null ? validateNumber(minAttr) : 0;
+
+        const maxAttr = sliderEl.getAttribute(`${prefix}-max`);
+        const sliderMax = maxAttr !== null ? validateNumber(maxAttr) : 100;
+
+        const stepsAttr = sliderEl.getAttribute(`${prefix}-steps`);
+        const sliderSteps = stepsAttr !== null ? validateNumber(stepsAttr) : 1;
+
+        const minDiffAttr = sliderEl.getAttribute(`${prefix}-mindifference`);
+        const minDifference = minDiffAttr !== null ? validateNumber(minDiffAttr) : sliderSteps;
+
+        return {
+            sliderMin,
+            sliderMax,
+            sliderSteps,
+            minDifference,
+            rightSuffix: sliderEl.getAttribute(`${prefix}-rightsuffix`) || null,
+            defaultSuffix: sliderEl.getAttribute(`${prefix}-defaultsuffix`) || null,
+            shouldFormatNumber: sliderEl.getAttribute(`${prefix}-formatnumber`) || null,
+        };
+    }
+
+    function constrainLeftValue(rawValue, rightValueStr, minDifference) {
+        return Math.min(
+            parseInt(rawValue, 10),
+            parseInt(rightValueStr, 10) - minDifference,
+        );
+    }
+
+    function constrainRightValue(rawValue, leftValueStr, minDifference) {
+        return Math.max(
+            parseInt(rawValue, 10),
+            parseInt(leftValueStr, 10) + minDifference,
+        );
+    }
+
+    function setNativeTextInputValue(input, constrainedValue, suspendBegin, suspendEnd) {
+        if (!input) return;
+        const valueProp = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+        suspendBegin();
+        valueProp.set.call(input, constrainedValue);
+        suspendEnd();
+    }
+
+    function formatStartDisplayContent(constrainedValue, shouldFormatNumberAttr) {
+        const displayLeft =
+            shouldFormatNumberAttr === 'true'
+                ? formatNumber(constrainedValue)
+                : constrainedValue;
+        return String(displayLeft);
+    }
+
+    function formatEndDisplayContent(
+        constrainedValue,
+        rawInputValue,
+        sliderMax,
+        shouldFormatNumberAttr,
+        rightSuffix,
+        defaultSuffix,
+    ) {
+        let finalDisplay =
+            shouldFormatNumberAttr === 'true'
+                ? formatNumber(constrainedValue)
+                : constrainedValue;
+        const rawNum = parseFloat(rawInputValue);
+        if (rightSuffix && !isNaN(rawNum) && rawNum >= sliderMax) {
+            return `${finalDisplay}${rightSuffix}`;
+        }
+        if (defaultSuffix) {
+            return `${finalDisplay}${defaultSuffix}`;
+        }
+        return String(finalDisplay);
+    }
+
+    function hookInputValueSync(input, handler, isSuspended) {
+        if (!input) return;
+        const valueProp = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+        try {
+            Object.defineProperty(input, 'value', {
+                get() {
+                    return valueProp.get.call(this);
+                },
+                set(v) {
+                    valueProp.set.call(this, v);
+                    if (!isSuspended()) {
+                        handler(v);
+                    }
+                },
+                configurable: true,
+                enumerable: true,
+            });
+        } catch (err) {
+            // Fallback: rely on 'input'/'change' listeners if defineProperty fails
+        }
+    }
+
+    function dispatchInputEvent(element) {
+        if (element) {
+            element.dispatchEvent(new Event('input', { bubbles: true }));
+        }
+    }
+
+    return {
+        readSliderConfig,
+        constrainLeftValue,
+        constrainRightValue,
+        setNativeTextInputValue,
+        formatStartDisplayContent,
+        formatEndDisplayContent,
+        hookInputValueSync,
+        dispatchInputEvent,
+    };
+}());
+
+const ATTR_PREFIX = 'wt-rangeslidersimple';
+
+/**
+ * Native dual-handle range slider; visible thumbs match browser hit targets.
+ * @param {HTMLElement} wrapper
+ */
+class RangeSliderSimple {
+    constructor(wrapper) {
+        try {
+            this.rs = __WT_RANGE_SLIDER_SIMPLE_CORE;
+
+            this.wrapper = wrapper;
+            this.slider = wrapper.querySelector(
+                `[${ATTR_PREFIX}-element="slider"]`,
+            );
+            this.__suspendExternalSync = false;
+
+            if (!this.slider) {
+                throw new Error('Slider element not found within wrapper');
+            }
+
+            this.addStyles();
+            this.initConfig();
+            this.initElements();
+            this.initState();
+            this.setupEventListeners();
+        } catch (err) {
+            console.error(`RangeSliderSimple initialization failed: ${err.message}`);
+        }
+    }
+
+    addStyles() {
+        const existing = document.getElementById('wt-rangeslidersimple-styles');
+        if (existing) return;
+
+        const style = document.createElement('style');
+        style.id = 'wt-rangeslidersimple-styles';
+        style.textContent = `
+    [${ATTR_PREFIX}-element="slider"] {
+        position: relative;
+        min-height: 32px;
+    }
+
+    [${ATTR_PREFIX}-element="input-left"],
+    [${ATTR_PREFIX}-element="input-right"] {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        height: 24px;
+        -webkit-appearance: none;
+        appearance: none;
+        background: transparent;
+        pointer-events: auto;
+        z-index: 2;
+        outline: none;
+    }
+
+    [${ATTR_PREFIX}-element="input-right"] {
+        z-index: 1;
+    }
+
+    [${ATTR_PREFIX}-element="input-left"]::-webkit-slider-thumb,
+    [${ATTR_PREFIX}-element="input-right"]::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background: #222;
+        cursor: pointer;
+        pointer-events: auto;
+    }
+
+    [${ATTR_PREFIX}-element="input-left"]::-moz-range-thumb,
+    [${ATTR_PREFIX}-element="input-right"]::-moz-range-thumb {
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background: #222;
+        cursor: pointer;
+        border: none;
+    }
+
+    [${ATTR_PREFIX}-element="input-left"]::-webkit-slider-runnable-track,
+    [${ATTR_PREFIX}-element="input-right"]::-webkit-slider-runnable-track {
+        height: 6px;
+        border-radius: 3px;
+        background: rgba(0, 0, 0, 0.12);
+    }
+
+    [${ATTR_PREFIX}-element="input-left"]::-moz-range-track,
+    [${ATTR_PREFIX}-element="input-right"]::-moz-range-track {
+        height: 6px;
+        border-radius: 3px;
+        background: rgba(0, 0, 0, 0.12);
+    }
+    `;
+        document.head.appendChild(style);
+    }
+
+    initConfig() {
+        const cfg = this.rs.readSliderConfig(this.slider, ATTR_PREFIX);
+        this.sliderMin = cfg.sliderMin;
+        this.sliderMax = cfg.sliderMax;
+        this.sliderSteps = cfg.sliderSteps;
+        this.minDifference = cfg.minDifference;
+        this.rightSuffix = cfg.rightSuffix;
+        this.defaultSuffix = cfg.defaultSuffix;
+        this.shouldFormatNumber = cfg.shouldFormatNumber;
+    }
+
+    initElements() {
+        this.rangeStart = this.wrapper.querySelector(
+            `[${ATTR_PREFIX}-range="from"]`,
+        );
+        this.rangeEnd = this.wrapper.querySelector(`[${ATTR_PREFIX}-range="to"]`);
+
+        this.displayStart = this.wrapper.querySelector(
+            `[${ATTR_PREFIX}-display="from"]`,
+        );
+        this.displayEnd = this.wrapper.querySelector(
+            `[${ATTR_PREFIX}-display="to"]`,
+        );
+
+        this.inputLeft = this.slider.querySelector(
+            `[${ATTR_PREFIX}-element="input-left"]`,
+        );
+        this.inputRight = this.slider.querySelector(
+            `[${ATTR_PREFIX}-element="input-right"]`,
+        );
+
+        this.validateRequiredElements();
+    }
+
+    initState() {
+        [this.inputLeft, this.inputRight].forEach((input) => {
+            input.setAttribute('min', this.sliderMin);
+            input.setAttribute('max', this.sliderMax);
+            input.setAttribute('step', this.sliderSteps);
+            input.setAttribute('formnovalidate', '');
+            input.setAttribute('data-form-ignore', '');
+        });
+
+        if (this.rangeStart && this.rangeStart.value) {
+            this.updateLeftValues(this.rangeStart.value);
+        } else {
+            this.updateLeftValues(this.sliderMin);
+        }
+
+        if (this.rangeEnd && this.rangeEnd.value) {
+            this.updateRightValues(this.rangeEnd.value);
+        } else {
+            this.updateRightValues(this.sliderMax);
+        }
+    }
+
+    bringInputToFront(which) {
+        if (which === 'left') {
+            this.inputLeft.style.zIndex = '3';
+            this.inputRight.style.zIndex = '1';
+        } else {
+            this.inputRight.style.zIndex = '3';
+            this.inputLeft.style.zIndex = '2';
+        }
+    }
+
+    updateLeftValues(value) {
+        const constrainedValue = this.rs.constrainLeftValue(
+            value,
+            this.inputRight.value,
+            this.minDifference,
+        );
+
+        this.inputLeft.value = constrainedValue;
+
+        if (this.rangeStart) {
+            this.rs.setNativeTextInputValue(
+                this.rangeStart,
+                constrainedValue,
+                () => {
+                    this.__suspendExternalSync = true;
+                },
+                () => {
+                    this.__suspendExternalSync = false;
+                },
+            );
+        }
+
+        if (this.displayStart) {
+            this.displayStart.textContent = this.rs.formatStartDisplayContent(
+                constrainedValue,
+                this.shouldFormatNumber,
+            );
+        }
+    }
+
+    updateRightValues(value) {
+        const constrainedValue = this.rs.constrainRightValue(
+            value,
+            this.inputLeft.value,
+            this.minDifference,
+        );
+
+        this.inputRight.value = constrainedValue;
+
+        if (this.rangeEnd) {
+            this.rs.setNativeTextInputValue(
+                this.rangeEnd,
+                constrainedValue,
+                () => {
+                    this.__suspendExternalSync = true;
+                },
+                () => {
+                    this.__suspendExternalSync = false;
+                },
+            );
+        }
+
+        if (this.displayEnd) {
+            this.displayEnd.textContent = this.rs.formatEndDisplayContent(
+                constrainedValue,
+                value,
+                this.sliderMax,
+                this.shouldFormatNumber,
+                this.rightSuffix,
+                this.defaultSuffix,
+            );
+        }
+    }
+
+    setupEventListeners() {
+        const onLeftPointer = () => this.bringInputToFront('left');
+        const onRightPointer = () => this.bringInputToFront('right');
+
+        this.inputLeft.addEventListener('pointerdown', onLeftPointer);
+        this.inputRight.addEventListener('pointerdown', onRightPointer);
+
+        this.inputLeft.addEventListener('input', () => {
+            this.updateLeftValues(this.inputLeft.value);
+            if (this.rangeStart) {
+                this.rs.dispatchInputEvent(this.rangeStart);
+            }
+        });
+
+        this.inputRight.addEventListener('input', () => {
+            this.updateRightValues(this.inputRight.value);
+            if (this.rangeEnd) {
+                this.rs.dispatchInputEvent(this.rangeEnd);
+            }
+        });
+
+        if (this.rangeStart) {
+            this.rangeStart.addEventListener('input', (e) => {
+                this.updateLeftValues(e.target.value);
+            });
+            this.rangeStart.addEventListener('change', (e) => {
+                this.updateLeftValues(e.target.value);
+            });
+            this.rs.hookInputValueSync(
+                this.rangeStart,
+                (val) => {
+                    this.updateLeftValues(val);
+                },
+                () => this.__suspendExternalSync,
+            );
+        }
+
+        if (this.rangeEnd) {
+            this.rangeEnd.addEventListener('input', (e) => {
+                this.updateRightValues(e.target.value);
+            });
+            this.rangeEnd.addEventListener('change', (e) => {
+                this.updateRightValues(e.target.value);
+            });
+            this.rs.hookInputValueSync(
+                this.rangeEnd,
+                (val) => {
+                    this.updateRightValues(val);
+                },
+                () => this.__suspendExternalSync,
+            );
+        }
+    }
+
+    setFrom(value) {
+        this.updateLeftValues(value);
+    }
+
+    setTo(value) {
+        this.updateRightValues(value);
+    }
+
+    setRange(from, to) {
+        this.updateLeftValues(from);
+        this.updateRightValues(to);
+    }
+
+    reset() {
+        this.setRange(this.sliderMin, this.sliderMax);
+    }
+
+    validateRequiredElements() {
+        const requiredElements = {
+            inputLeft: this.inputLeft,
+            inputRight: this.inputRight,
+        };
+
+        Object.entries(requiredElements).forEach(([name, element]) => {
+            if (!element) {
+                throw new Error(`Required element ${name} is missing`);
+            }
+        });
+    }
+}
+
+const initializeRangeSliderSimple = () => {
+    try {
+        window.webtricks = window.webtricks || [];
+        const wrappers = document.querySelectorAll(
+            `[${ATTR_PREFIX}-element="slider-wrapper"]`,
+        );
+
+        if (!wrappers || wrappers.length === 0) return;
+
+        wrappers.forEach((wrapper) => {
+            const instance = new RangeSliderSimple(wrapper);
+            window.webtricks.push({ RangeSliderSimple: instance });
+        });
+    } catch (err) {
+        console.error(`RangeSliderSimple initialization error: ${err.message}`);
+    }
+};
+
+if (/complete|interactive|loaded/.test(document.readyState)) {
+    initializeRangeSliderSimple();
+} else {
+    window.addEventListener('DOMContentLoaded', initializeRangeSliderSimple);
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = {
+        RangeSliderSimple,
+        InitializeRangeSliderSimple: initializeRangeSliderSimple,
+    };
+}
diff --git a/README.md b/README.md
index 582f885..956ee63 100644
--- a/README.md
+++ b/README.md
@@ -78,6 +78,21 @@ Multiple Scripts: Add as many scripts as you need to your project by referencing
 <script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/webtricks@1/dist/Functional/CMSFilter.min.js"></script>
 <script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/webtricks@1/dist/Functional/FormCheck.min.js"></script>
 ```
+
+**Range sliders:** each script is **self-contained** (one tag). Use **`RangeSlider.js`** for custom thumbs or **`RangeSliderSimple.js`** for native thumbs only. Use jsDelivr (not raw `githubusercontent.com`, which often serves `text/plain` and blocks execution).
+
+```
+<script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@main/Dist/Functional/RangeSlider.js"></script>
+```
+
+Native-thumb variant:
+
+```
+<script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@main/Dist/Functional/RangeSliderSimple.js"></script>
+```
+
+If a page uses **both** slider types, you may include **both** scripts; they use separate attribute namespaces (`wt-rangeslider-*` vs `wt-rangeslidersimple-*`).
+
 Ready to Use: Once imported, the scripts initialize automatically, provided the correct HTML attributes are in place.
 
     
diff --git a/__tests__/RangeSlider.test.js b/__tests__/RangeSlider.test.js
new file mode 100644
index 0000000..9f0f9f4
--- /dev/null
+++ b/__tests__/RangeSlider.test.js
@@ -0,0 +1,50 @@
+/** @jest-environment jsdom */
+
+Object.defineProperty(document, 'readyState', { value: 'loading', configurable: true });
+
+describe('RangeSlider', () => {
+    let RangeSlider;
+    let InitializeRangeSlider;
+
+    beforeEach(() => {
+        document.body.innerHTML = '';
+        window.webtricks = [];
+        jest.resetModules();
+        ({ RangeSlider, InitializeRangeSlider } = require('../Dist/Functional/RangeSlider.js'));
+    });
+
+    function mountRangeSlider() {
+        document.body.innerHTML = `
+      <div wt-rangeslider-element="slider-wrapper">
+        <div wt-rangeslider-element="slider"
+             wt-rangeslider-min="0"
+             wt-rangeslider-max="100"
+             wt-rangeslider-steps="1">
+          <div wt-rangeslider-element="range"></div>
+          <div wt-rangeslider-element="thumb-left"></div>
+          <div wt-rangeslider-element="thumb-right"></div>
+          <input type="range" wt-rangeslider-element="input-left" />
+          <input type="range" wt-rangeslider-element="input-right" />
+        </div>
+      </div>
+    `;
+    }
+
+    test('constructor sets initial values from min/max', () => {
+        mountRangeSlider();
+        const wrapper = document.querySelector(
+            '[wt-rangeslider-element="slider-wrapper"]',
+        );
+        new RangeSlider(wrapper);
+        const left = wrapper.querySelector('[wt-rangeslider-element="input-left"]');
+        const right = wrapper.querySelector('[wt-rangeslider-element="input-right"]');
+        expect(left.value).toBe('0');
+        expect(right.value).toBe('100');
+    });
+
+    test('InitializeRangeSlider pushes instance to webtricks', () => {
+        mountRangeSlider();
+        InitializeRangeSlider();
+        expect(window.webtricks.some((e) => e.RangeSlider)).toBe(true);
+    });
+});
diff --git a/__tests__/RangeSliderSimple.test.js b/__tests__/RangeSliderSimple.test.js
new file mode 100644
index 0000000..94d4e28
--- /dev/null
+++ b/__tests__/RangeSliderSimple.test.js
@@ -0,0 +1,58 @@
+/** @jest-environment jsdom */
+
+Object.defineProperty(document, 'readyState', { value: 'loading', configurable: true });
+
+describe('RangeSliderSimple', () => {
+    let RangeSliderSimple;
+    let InitializeRangeSliderSimple;
+
+    beforeEach(() => {
+        document.body.innerHTML = '';
+        window.webtricks = [];
+        jest.resetModules();
+        ({
+            RangeSliderSimple,
+            InitializeRangeSliderSimple,
+        } = require('../Dist/Functional/RangeSliderSimple.js'));
+    });
+
+    function mountSlider() {
+        document.body.innerHTML = `
+      <div wt-rangeslidersimple-element="slider-wrapper">
+        <div wt-rangeslidersimple-display="from">0</div>
+        <div wt-rangeslidersimple-display="to">100</div>
+        <div wt-rangeslidersimple-element="slider"
+             wt-rangeslidersimple-min="0"
+             wt-rangeslidersimple-max="100"
+             wt-rangeslidersimple-steps="1">
+          <input type="range" wt-rangeslidersimple-element="input-left" />
+          <input type="range" wt-rangeslidersimple-element="input-right" />
+        </div>
+      </div>
+    `;
+    }
+
+    test('constructor wires inputs and displays', () => {
+        mountSlider();
+        const wrapper = document.querySelector(
+            '[wt-rangeslidersimple-element="slider-wrapper"]',
+        );
+        const instance = new RangeSliderSimple(wrapper);
+        const left = wrapper.querySelector(
+            '[wt-rangeslidersimple-element="input-left"]',
+        );
+        const right = wrapper.querySelector(
+            '[wt-rangeslidersimple-element="input-right"]',
+        );
+        expect(left.value).toBe('0');
+        expect(right.value).toBe('100');
+        expect(instance.sliderMin).toBe(0);
+        expect(instance.sliderMax).toBe(100);
+    });
+
+    test('InitializeRangeSliderSimple pushes instance to webtricks', () => {
+        mountSlider();
+        InitializeRangeSliderSimple();
+        expect(window.webtricks.some((e) => e.RangeSliderSimple)).toBe(true);
+    });
+});
diff --git a/docs/Functional/CookieConsent.md b/docs/Functional/CookieConsent.md
index 81aa7d1..b7c57df 100644
--- a/docs/Functional/CookieConsent.md
+++ b/docs/Functional/CookieConsent.md
@@ -1,12 +1,15 @@
 # CookieConsent
 
 ## Version
+
 Current Version: 1.0.0
 
 ## Description
+
 CookieConsent is a GDPR-compliant cookie consent management system that provides granular control over cookie preferences and script loading. It supports multiple consent categories, manages consent persistence, and controls script loading based on user preferences.
 
 ## Functionality
+
 - Cookie consent banner management
 - Multiple consent categories
 - Granular script loading control
@@ -17,18 +20,22 @@ CookieConsent is a GDPR-compliant cookie consent management system that provides
 - Category-based script loading
 
 ## Usage
+
 Add the script to your project and include the required attributes on your banner and script elements.
 
 ### Installation
+
 ```html
 <script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/Functional/CookieConsent.min.js"></script>
 ```
 
 ### Required Attributes
+
 - `wt-cookieconsent-element="banner"` - Applied to the main cookie banner container
 - `wt-cookieconsent-script="category"` - Applied to scripts that require consent
 
 ### Optional Elements and Attributes
+
 - `wt-cookieconsent-element="accept-all"` - Accept all cookies button
 - `wt-cookieconsent-element="accept-necessary"` - Accept necessary cookies only button
 - `wt-cookieconsent-element="manage-cookies"` - Manage cookies settings button
@@ -36,6 +43,7 @@ Add the script to your project and include the required attributes on your banne
 - `wt-cookieconsent-category="category-name"` - Category checkbox inputs
 
 ## Considerations
+
 1. **GDPR Compliance**: Supports granular consent management
 2. **Script Loading**: Automatically handles script loading based on consent
 3. **Persistence**: Stores consent in cookies with configurable expiry
@@ -45,6 +53,7 @@ Add the script to your project and include the required attributes on your banne
 ## Examples
 
 ### Basic Implementation
+
 ```html
 <!-- Cookie Banner -->
 <div wt-cookieconsent-element="banner">
@@ -59,6 +68,7 @@ Add the script to your project and include the required attributes on your banne
 ```
 
 ### Advanced Implementation with Categories
+
 ```html
 <div wt-cookieconsent-element="banner">
     <p>Choose your cookie preferences</p>
@@ -102,6 +112,7 @@ Add the script to your project and include the required attributes on your banne
 ```
 
 ### Inline Script Implementation
+
 ```html
 <!-- Inline script with consent -->
 <script wt-cookieconsent-script="analytics">
@@ -111,8 +122,9 @@ Add the script to your project and include the required attributes on your banne
 ```
 
 ### Common Use Cases
+
 1. GDPR compliance implementation
 2. Analytics script management
 3. Marketing pixel control
 4. A/B testing script management
-5. Third-party service integration
\ No newline at end of file
+5. Third-party service integration
diff --git a/docs/Functional/CopyToClipboard.md b/docs/Functional/CopyToClipboard.md
index 5cdb15d..043f2d9 100644
--- a/docs/Functional/CopyToClipboard.md
+++ b/docs/Functional/CopyToClipboard.md
@@ -1,12 +1,15 @@
 # CopyToClipboard
 
 ## Version
+
 Current Version: 1.0.0
 
 ## Description
+
 CopyToClipboard is a utility script that enables copying text to clipboard with visual feedback. It supports custom success messages, styling, and timeout durations for the feedback display.
 
 ## Functionality
+
 - One-click text copying
 - Customizable success messages
 - Visual feedback through classes
@@ -16,25 +19,30 @@ CopyToClipboard is a utility script that enables copying text to clipboard with
 - Multiple instances support
 
 ## Usage
+
 Add the script to your project and include the required attributes on your copy elements.
 
 ### Installation
+
 ```html
 <script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/Functional/CopyToClipboard.min.js"></script>
 ```
 
 ### Required Attributes
+
 - `wt-copycb-element="container"` - Applied to the container element
 - `wt-copycb-element="trigger"` - Applied to the click trigger element
 - `wt-copycb-element="target"` - Applied to the element containing text to copy
 
 ### Optional Attributes
+
 - `wt-copycb-message="Copied!"` - Custom success message
 - `wt-copycb-active="is-copy"` - CSS class for active state
 - `wt-copycb-timeout="2000"` - Duration to show success state (ms)
 - `wt-copycb-element="texttarget"` - Element within trigger to update with success message
 
 ## Considerations
+
 1. **Clipboard API**: Uses modern navigator.clipboard API
 2. **State Management**: Automatically resets to original state
 3. **Visual Feedback**: Supports both text and class-based feedback
@@ -44,6 +52,7 @@ Add the script to your project and include the required attributes on your copy
 ## Examples
 
 ### Basic Implementation
+
 ```html
 <div wt-copycb-element="container">
     <button wt-copycb-element="trigger">Copy Text</button>
@@ -52,6 +61,7 @@ Add the script to your project and include the required attributes on your copy
 ```
 
 ### Advanced Implementation
+
 ```html
 <div wt-copycb-element="container">
     <button wt-copycb-element="trigger"
@@ -68,6 +78,7 @@ Add the script to your project and include the required attributes on your copy
 ```
 
 ### CSS Styling Example
+
 ```css
 /* Default state */
 [wt-copycb-element="trigger"] {
@@ -82,6 +93,7 @@ Add the script to your project and include the required attributes on your copy
 ```
 
 ### Common Use Cases
+
 1. Code snippet copying
 2. Share link buttons
 3. Reference number copying
@@ -89,8 +101,9 @@ Add the script to your project and include the required attributes on your copy
 5. Form field duplication
 
 ### Best Practices
+
 1. Always provide visual feedback for copy action
 2. Use clear and concise success messages
 3. Consider mobile touch interactions
 4. Maintain original styling during state changes
-5. Include fallback for unsupported browsers
\ No newline at end of file
+5. Include fallback for unsupported browsers
diff --git a/docs/Functional/CountUp.md b/docs/Functional/CountUp.md
index 1a57d4f..b0544c1 100644
--- a/docs/Functional/CountUp.md
+++ b/docs/Functional/CountUp.md
@@ -1,12 +1,15 @@
 # CountUp
 
 ## Version
+
 Current Version: 1.0.0
 
 ## Description
+
 CountUp is a lightweight animation script that creates counting animations from zero to a target number. It supports customizable counting speed, step size, and allows adding prefix and suffix text to the displayed number.
 
 ## Functionality
+
 - Animated number counting
 - Configurable target number
 - Adjustable animation speed
@@ -16,24 +19,29 @@ CountUp is a lightweight animation script that creates counting animations from
 - Error handling
 
 ## Usage
+
 Add the script to your project and include the required attributes on your counter elements.
 
 ### Installation
+
 ```html
 <script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/Functional/CountUp.min.js"></script>
 ```
 
 ### Required Attributes
+
 - `wt-countup-element="counter"` - Applied to the element that will display the counting animation
 - `wt-countup-target="100"` - The target number to count up to
 
 ### Optional Attributes
+
 - `wt-countup-prefix="$"` - Text to display before the number
 - `wt-countup-suffix="+"` - Text to display after the number
 - `wt-countup-step="5"` - Number to increment by (default: 1)
 - `wt-countup-speed="10"` - Animation speed in milliseconds (default: 10)
 
 ## Considerations
+
 1. **Performance**: Uses setInterval for animation timing
 2. **Memory Management**: Automatically clears interval when target is reached
 3. **Error Handling**: Gracefully handles initialization errors
@@ -43,6 +51,7 @@ Add the script to your project and include the required attributes on your count
 ## Examples
 
 ### Basic Implementation
+
 ```html
 <div wt-countup-element="counter" 
      wt-countup-target="100">
@@ -51,6 +60,7 @@ Add the script to your project and include the required attributes on your count
 ```
 
 ### Advanced Implementation
+
 ```html
 <div wt-countup-element="counter"
      wt-countup-target="1000"
@@ -63,6 +73,7 @@ Add the script to your project and include the required attributes on your count
 ```
 
 ### Multiple Counters
+
 ```html
 <!-- Basic counter -->
 <div wt-countup-element="counter" 
@@ -88,8 +99,9 @@ Add the script to your project and include the required attributes on your count
 ```
 
 ### Common Use Cases
+
 1. Statistics displays
 2. Progress indicators
 3. Achievement counters
 4. Price animations
-5. Loading indicators
\ No newline at end of file
+5. Loading indicators
diff --git a/docs/Functional/DateCountDown.md b/docs/Functional/DateCountDown.md
index ed13141..48c5ffe 100644
--- a/docs/Functional/DateCountDown.md
+++ b/docs/Functional/DateCountDown.md
@@ -1,12 +1,15 @@
 # DateCountDown
 
 ## Version
+
 Current Version: 1.0.0 (Experimental)
 
 ## Description
+
 DateCountDown is a countdown timer script that displays the time remaining until a target date. It supports separate displays for years, months, days, hours, minutes, and seconds, with automatic updates every second.
 
 ## Functionality
+
 - Countdown to target date
 - Separate time unit displays
 - Real-time updates
@@ -16,17 +19,21 @@ DateCountDown is a countdown timer script that displays the time remaining until
 - Time unit separation
 
 ## Usage
+
 Add the script to your project and include the required attributes on your countdown elements.
 
 ### Installation
+
 ```html
 <script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/Functional/Experimental/DateCountDown.min.js"></script>
 ```
 
 ### Required Attributes
+
 - `wt-datecount-element="target-date"` - Applied to element containing the target date
 
 ### Optional Elements
+
 - `wt-datecount-element="target-year"` - Display years remaining
 - `wt-datecount-element="target-month"` - Display months remaining
 - `wt-datecount-element="target-day"` - Display days remaining
@@ -35,6 +42,7 @@ Add the script to your project and include the required attributes on your count
 - `wt-datecount-element="target-second"` - Display seconds remaining
 
 ## Considerations
+
 1. **Date Format**: Uses standard JavaScript Date parsing
 2. **Performance**: Updates every second using setInterval
 3. **Validation**: Includes date validation to prevent errors
@@ -44,6 +52,7 @@ Add the script to your project and include the required attributes on your count
 ## Examples
 
 ### Basic Implementation
+
 ```html
 <!-- Target date -->
 <div wt-datecount-element="target-date">2025-12-31</div>
@@ -56,6 +65,7 @@ Add the script to your project and include the required attributes on your count
 ```
 
 ### Full Implementation
+
 ```html
 <div class="countdown-wrapper">
     <!-- Target date -->
@@ -100,6 +110,7 @@ Add the script to your project and include the required attributes on your count
 ```
 
 ### CSS Styling Example
+
 ```css
 .countdown-unit {
     text-align: center;
@@ -119,6 +130,7 @@ Add the script to your project and include the required attributes on your count
 ```
 
 ### Common Use Cases
+
 1. Event countdown timers
 2. Launch date countdowns
 3. Sale end time displays
@@ -126,8 +138,9 @@ Add the script to your project and include the required attributes on your count
 5. Holiday countdown displays
 
 ### Best Practices
+
 1. Always validate the target date
 2. Consider timezone differences
 3. Use clear labels for time units
 4. Provide fallback content for expired dates
-5. Consider mobile display layouts
\ No newline at end of file
+5. Consider mobile display layouts
diff --git a/docs/Functional/FormCheck.md b/docs/Functional/FormCheck.md
index 2b89858..a379fc2 100644
--- a/docs/Functional/FormCheck.md
+++ b/docs/Functional/FormCheck.md
@@ -1,12 +1,15 @@
 # FormCheck
 
 ## Version
+
 Current Version: 1.0.0
 
 ## Description
+
 FormCheck is a comprehensive form validation script that provides real-time validation for form inputs with customizable error handling and submission behavior. It supports various input types including text, email, phone, number, and checkboxes.
 
 ## Functionality
+
 - Real-time input validation
 - Custom error messages
 - Email format validation
@@ -18,26 +21,31 @@ FormCheck is a comprehensive form validation script that provides real-time vali
 - Success message display
 
 ## Usage
+
 Add the script to your project and include the required attributes on your form and form elements.
 
 ### Installation
+
 ```html
 <script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/Functional/FormCheck.min.js"></script>
 ```
 
 ### Required Attributes
+
 - `wt-formcheck-element="form"` - Applied to the form element
 - `wt-formcheck-type="submit"` - Applied to the submit button
 - `wt-formcheck-type="required"` - Applied to required input fields
 - `wt-formcheck-type="error"` - Applied to error message elements
 
 ### Optional Attributes
+
 - `wt-formcheck-class="error-class"` - Custom error class for styling
 - `wt-formcheck-message="Success!"` - Custom success message
 - `wt-formcheck-element="default-submit"` - Default submit button (for CMS forms)
 - `wt-formcheck-element="reset"` - Form reset button
 
 ## Considerations
+
 1. **Error Display**: Error messages are hidden by default and shown on validation failure
 2. **Input Types**: Supports text, email, phone, number, and checkbox inputs
 3. **Real-time Validation**: Clears errors on input change or blur
@@ -47,6 +55,7 @@ Add the script to your project and include the required attributes on your form
 ## Examples
 
 ### Basic Implementation
+
 ```html
 <form wt-formcheck-element="form" wt-formcheck-class="error">
     <!-- Text input with error message -->
@@ -67,6 +76,7 @@ Add the script to your project and include the required attributes on your form
 ```
 
 ### Advanced Implementation
+
 ```html
 <form wt-formcheck-element="form" 
       wt-formcheck-class="error-state"
@@ -91,6 +101,7 @@ Add the script to your project and include the required attributes on your form
 ```
 
 ### CSS Styling Example
+
 ```css
 /* Error state styling */
 .error-state {
@@ -106,8 +117,9 @@ Add the script to your project and include the required attributes on your form
 ```
 
 ### Common Use Cases
+
 1. Contact forms
 2. Registration forms
 3. Newsletter signup
 4. Booking forms
-5. Survey forms
\ No newline at end of file
+5. Survey forms
diff --git a/docs/Functional/FormatNumbers.md b/docs/Functional/FormatNumbers.md
index 2b5495e..2fd4125 100644
--- a/docs/Functional/FormatNumbers.md
+++ b/docs/Functional/FormatNumbers.md
@@ -1,12 +1,15 @@
 # FormatNumbers
 
 ## Version
+
 Current Version: 1.0.0
 
 ## Description
+
 FormatNumbers is a utility script that provides internationalization and formatting for numbers, supporting various formats including currency, decimals, percentages, and units. It uses the native Intl.NumberFormat API for reliable and locale-aware number formatting.
 
 ## Functionality
+
 - International number formatting
 - Currency formatting
 - Percentage formatting
@@ -17,23 +20,28 @@ FormatNumbers is a utility script that provides internationalization and formatt
 - Automatic initialization
 
 ## Usage
+
 Add the script to your project and include the required attributes on elements containing numbers to format.
 
 ### Installation
+
 ```html
 <script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/Functional/FormatNumbers.min.js"></script>
 ```
 
 ### Required Attributes
+
 - `wt-formatnumber-element="number"` - Applied to elements containing numbers to format
 
 ### Optional Attributes
+
 - `wt-formatnumber-locales="en-US"` - Locale code for formatting
 - `wt-formatnumber-style="style"` - Format style (currency, decimal, percent, unit)
 - `wt-formatnumber-currency="USD"` - Currency code (required when style is currency)
 - `wt-formatnumber-unit="kilometer"` - Unit type (required when style is unit)
 
 ## Considerations
+
 1. **Number Parsing**: Handles numbers with or without commas
 2. **Locale Support**: Uses browser's Intl API for localization
 3. **Currency Codes**: Requires valid ISO 4217 currency codes
@@ -43,6 +51,7 @@ Add the script to your project and include the required attributes on elements c
 ## Examples
 
 ### Basic Number Formatting
+
 ```html
 <!-- Basic decimal formatting -->
 <div wt-formatnumber-element="number" 
@@ -53,6 +62,7 @@ Add the script to your project and include the required attributes on elements c
 ```
 
 ### Currency Formatting
+
 ```html
 <!-- Currency formatting -->
 <div wt-formatnumber-element="number"
@@ -64,6 +74,7 @@ Add the script to your project and include the required attributes on elements c
 ```
 
 ### Percentage and Unit Formatting
+
 ```html
 <!-- Percentage -->
 <div wt-formatnumber-element="number"
@@ -82,6 +93,7 @@ Add the script to your project and include the required attributes on elements c
 ```
 
 ### Different Locales Example
+
 ```html
 <!-- Same number, different locales -->
 <div wt-formatnumber-element="number"
@@ -100,8 +112,9 @@ Add the script to your project and include the required attributes on elements c
 ```
 
 ### Common Use Cases
+
 1. Price displays
 2. Financial statistics
 3. Measurement displays
 4. Percentage indicators
-5. Localized number formatting
\ No newline at end of file
+5. Localized number formatting
diff --git a/docs/Functional/Marquee.md b/docs/Functional/Marquee.md
index 24a5848..29556c6 100644
--- a/docs/Functional/Marquee.md
+++ b/docs/Functional/Marquee.md
@@ -1,12 +1,15 @@
 # Marquee
 
 ## Version
+
 Current Version: 1.0.0
 
 ## Description
+
 Marquee is a modern implementation of scrolling content that provides smooth, continuous movement in any direction. It automatically handles content repetition and supports both horizontal and vertical scrolling with configurable speed.
 
 ## Functionality
+
 - Smooth scrolling animation
 - Multi-directional support (left, right, top, bottom)
 - Automatic content duplication
@@ -17,22 +20,27 @@ Marquee is a modern implementation of scrolling content that provides smooth, co
 - Continuous loop effect
 
 ## Usage
+
 Add the script to your project and include the required attributes on your marquee container.
 
 ### Installation
+
 ```html
 <script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/Functional/Marquee.min.js"></script>
 ```
 
 ### Required Attributes
+
 - `wt-marquee-element="container"` - Applied to the main marquee container
 
 ### Optional Attributes
+
 - `wt-marquee-speed="50"` - Animation speed in milliseconds (default: 50)
 - `wt-marquee-direction="left"` - Scroll direction (default: left)
   - Supported values: `left`, `right`, `top`, `bottom`
 
 ## Considerations
+
 1. **Content Duplication**: Automatically duplicates content to ensure continuous scrolling
 2. **Gap Handling**: Respects CSS gap property between elements
 3. **Performance**: Uses GPU-accelerated animations via transform3d
@@ -42,6 +50,7 @@ Add the script to your project and include the required attributes on your marqu
 ## Examples
 
 ### Basic Horizontal Marquee
+
 ```html
 <div wt-marquee-element="container">
     <div class="marquee-item">Item 1</div>
@@ -51,6 +60,7 @@ Add the script to your project and include the required attributes on your marqu
 ```
 
 ### Vertical Marquee with Custom Speed
+
 ```html
 <div wt-marquee-element="container" 
      wt-marquee-direction="top" 
@@ -62,6 +72,7 @@ Add the script to your project and include the required attributes on your marqu
 ```
 
 ### Common Use Cases
+
 1. News tickers
 2. Announcement banners
 3. Product showcases
@@ -69,6 +80,7 @@ Add the script to your project and include the required attributes on your marqu
 5. Content rotation displays
 
 ### Styling Tips
+
 ```css
 /* Container styling */
 [wt-marquee-element="container"] {
@@ -83,8 +95,9 @@ Add the script to your project and include the required attributes on your marqu
 ```
 
 ## Best Practices
+
 1. Keep content items similar in size for smooth scrolling
 2. Use the gap property for consistent spacing
 3. Ensure parent container has a defined size
 4. Use flex-shrink: 0 on items to maintain dimensions
-5. Consider using will-change: transform for performance
\ No newline at end of file
+5. Consider using will-change: transform for performance
diff --git a/docs/Functional/RangeSlider.md b/docs/Functional/RangeSlider.md
index 3d33efc..4ecfab1 100644
--- a/docs/Functional/RangeSlider.md
+++ b/docs/Functional/RangeSlider.md
@@ -1,12 +1,17 @@
 # RangeSlider
 
 ## Version
+
 Current Version: 1.1.0
 
 ## Description
+
 RangeSlider is a highly customizable dual-handle range slider component that allows users to select value ranges. It provides real-time visual updates, form integration, and supports custom styling including SVG/image thumbnails.
 
+For **native browser thumbs only** (no custom thumb DOM), see [RangeSliderSimple](./RangeSliderSimple.md).
+
 ## Functionality
+
 - Dual handles for range selection
 - Real-time value updates
 - Form input integration
@@ -18,14 +23,19 @@ RangeSlider is a highly customizable dual-handle range slider component that all
 - Mobile-friendly interaction
 
 ## Usage
+
 Add the script to your project and include the required attributes and elements structure.
 
 ### Installation
+
+Self-contained: **one** script tag. Use [jsDelivr](https://www.jsdelivr.com/) (not raw GitHub URLs) so the MIME type is JavaScript.
+
 ```html
-<script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/Functional/RangeSlider.min.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@main/Dist/Functional/RangeSlider.js"></script>
 ```
 
 ### Required Attributes
+
 - `wt-rangeslider-element="slider-wrapper"` - Container element
 - `wt-rangeslider-element="slider"` - Main slider element
 - `wt-rangeslider-element="input-left"` - Left range input
@@ -35,17 +45,20 @@ Add the script to your project and include the required attributes and elements
 - `wt-rangeslider-element="range"` - Range indicator element
 
 ### Optional Attributes
+
 - `wt-rangeslider-min="0"` - Minimum value (default: 0)
 - `wt-rangeslider-max="100"` - Maximum value (default: 100)
 - `wt-rangeslider-steps="1"` - Step size (default: 1)
 
 ### Optional Elements
+
 - `wt-rangeslider-range="from"` - Form input for start value
 - `wt-rangeslider-range="to"` - Form input for end value
 - `wt-rangeslider-display="from"` - Display element for start value
 - `wt-rangeslider-display="to"` - Display element for end value
 
 ## Considerations
+
 1. **Form Integration**: Automatically updates connected form inputs
 2. **Value Constraints**: Ensures left value never exceeds right value
 3. **Visual Updates**: Real-time updates of all connected elements
@@ -55,6 +68,7 @@ Add the script to your project and include the required attributes and elements
 ## Examples
 
 ### Basic Implementation
+
 ```html
 <div wt-rangeslider-element="slider-wrapper">
     <!-- Display Elements -->
@@ -80,6 +94,7 @@ Add the script to your project and include the required attributes and elements
 ```
 
 ### Custom Thumb Implementation
+
 ```html
 <div wt-rangeslider-element="slider-wrapper">
     <div wt-rangeslider-element="slider">
@@ -101,8 +116,9 @@ Add the script to your project and include the required attributes and elements
 ```
 
 ### Common Use Cases
+
 1. Price range selectors
 2. Date range pickers
 3. Filter interfaces
 4. Numerical range inputs
-5. Custom range controls
\ No newline at end of file
+5. Custom range controls
diff --git a/docs/Functional/RangeSliderSimple.md b/docs/Functional/RangeSliderSimple.md
new file mode 100644
index 0000000..6d9ebd4
--- /dev/null
+++ b/docs/Functional/RangeSliderSimple.md
@@ -0,0 +1,77 @@
+# RangeSliderSimple
+
+## Description
+
+`RangeSliderSimple` is a dual-handle range control built from two native `<input type="range">` elements. The draggable thumbs you see are the browser’s own controls, so hit targets stay aligned with the visuals. The file is **self-contained** (same core behavior as `RangeSlider`, inlined—keep edits in sync manually if you change constraint/display logic).
+
+Use **`RangeSlider`** when you need custom thumb graphics or a separate range bar element. Use **`RangeSliderSimple`** when native appearance (plus your own CSS overrides) is enough.
+
+## Functionality
+
+- Dual native range inputs
+- Same optional form/display wiring pattern as `RangeSlider` (with `wt-rangeslidersimple-*` names)
+- Configurable min, max, step, minimum gap between handles
+- Optional number formatting and display suffixes
+- `pointerdown` raises the active track so overlapping handles remain grabbable
+
+## Installation
+
+One script tag. Use [jsDelivr](https://www.jsdelivr.com/) (not raw GitHub URLs) so the MIME type is JavaScript.
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@main/Dist/Functional/RangeSliderSimple.js"></script>
+```
+
+## Required attributes
+
+- `wt-rangeslidersimple-element="slider-wrapper"` — outer container
+- `wt-rangeslidersimple-element="slider"` — track container (holds both inputs)
+- `wt-rangeslidersimple-element="input-left"` — left `<input type="range">`
+- `wt-rangeslidersimple-element="input-right"` — right `<input type="range">`
+
+## Optional attributes (on the slider element)
+
+Same semantics as `RangeSlider`, with the `wt-rangeslidersimple-` prefix:
+
+- `wt-rangeslidersimple-min`, `wt-rangeslidersimple-max`, `wt-rangeslidersimple-steps`
+- `wt-rangeslidersimple-mindifference`
+- `wt-rangeslidersimple-formatnumber`, `wt-rangeslidersimple-rightsuffix`, `wt-rangeslidersimple-defaultsuffix`
+
+## Optional elements (inside wrapper)
+
+- `[wt-rangeslidersimple-range="from"]`, `[wt-rangeslidersimple-range="to"]` — text inputs
+- `[wt-rangeslidersimple-display="from"]`, `[wt-rangeslidersimple-display="to"]` — display nodes
+
+## Example
+
+```html
+<div wt-rangeslidersimple-element="slider-wrapper">
+  <div wt-rangeslidersimple-display="from">0</div>
+  <div wt-rangeslidersimple-display="to">100</div>
+  <input wt-rangeslidersimple-range="from" type="text" value="20" />
+  <input wt-rangeslidersimple-range="to" type="text" value="80" />
+  <div
+    wt-rangeslidersimple-element="slider"
+    wt-rangeslidersimple-min="0"
+    wt-rangeslidersimple-max="100"
+    wt-rangeslidersimple-steps="1"
+  >
+    <input type="range" wt-rangeslidersimple-element="input-left" />
+    <input type="range" wt-rangeslidersimple-element="input-right" />
+  </div>
+</div>
+```
+
+## Using both slider types on one page
+
+You may load **`RangeSlider.js`** and **`RangeSliderSimple.js`** on the same page. Do **not** mix attribute families on the same component (`wt-rangeslider-*` vs `wt-rangeslidersimple-*`).
+
+## CMSFilter
+
+Filter-driven min/max for collection ranges applies to **`wt-rangeslider-*`** only unless `CMSFilter` is extended for `wt-rangeslidersimple-*`.
+
+## Public API (instance)
+
+After init, instances are available on `window.webtricks` as `{ RangeSliderSimple: instance }`.
+
+- `setFrom(value)`, `setTo(value)`, `setRange(from, to)`, `reset()`
diff --git a/docs/Functional/ReadTime.md b/docs/Functional/ReadTime.md
index 6bbcbe8..1654ff1 100644
--- a/docs/Functional/ReadTime.md
+++ b/docs/Functional/ReadTime.md
@@ -1,12 +1,15 @@
 # ReadTime
 
 ## Version
+
 Current Version: 1.0.0
 
 ## Description
+
 ReadTime is a script that calculates and displays estimated reading time for articles or text content. It uses configurable words-per-minute rates and supports custom suffix formatting for the time display.
 
 ## Functionality
+
 - Automatic reading time calculation
 - Configurable words per minute rate
 - Custom suffix support
@@ -15,25 +18,30 @@ ReadTime is a script that calculates and displays estimated reading time for art
 - Automatic initialization
 
 ## Usage
+
 Add the script to your project and include the required attributes on your article container and display elements.
 
 ### Installation
+
 ```html
 <script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/Functional/ReadTime.min.js"></script>
 ```
 
 ### Required Attributes
+
 - `wt-readtime-element="article"` - Applied to the container with the text content
 - `wt-readtime-element="display"` - Applied to elements that will display the reading time
 
 ### Optional Attributes
+
 - `wt-readtime-words="225"` - Set custom words per minute (default: 225)
 - `wt-readtime-suffix="min read"` - Custom suffix for reading time
 - `wt-readtime-smallsuffix="Quick read"` - Custom text for content under 1 minute
 
 ## Considerations
+
 1. **Word Count**: Uses space-based word counting
-2. **Display Format**: 
+2. **Display Format**:
    - Under 1 minute: Shows "less than a minute" or custom smallsuffix
    - 1 minute: Shows "a minute"
    - Over 1 minute: Shows "X minutes" or custom suffix
@@ -44,6 +52,7 @@ Add the script to your project and include the required attributes on your artic
 ## Examples
 
 ### Basic Implementation
+
 ```html
 <article wt-readtime-element="article">
     <!-- Article content here -->
@@ -54,6 +63,7 @@ Add the script to your project and include the required attributes on your artic
 ```
 
 ### Custom Configuration
+
 ```html
 <article 
     wt-readtime-element="article"
@@ -73,8 +83,9 @@ Add the script to your project and include the required attributes on your artic
 ```
 
 ### Common Use Cases
+
 1. Blog post reading time estimates
 2. Article length indicators
 3. Content engagement metrics
 4. User experience enhancement
-5. Content planning and organization
\ No newline at end of file
+5. Content planning and organization
diff --git a/docs/Functional/ShareLink.md b/docs/Functional/ShareLink.md
index e3f888d..811a7bb 100644
--- a/docs/Functional/ShareLink.md
+++ b/docs/Functional/ShareLink.md
@@ -1,12 +1,15 @@
 # ShareLink
 
 ## Version
+
 Current Version: 1.0.0
 
 ## Description
+
 ShareLink is a lightweight script that enables easy social media sharing functionality. It automatically generates sharing URLs for various social media platforms and handles the sharing process through their respective APIs.
 
 ## Functionality
+
 - Supports multiple social media platforms
 - Automatic URL encoding
 - Title and description handling
@@ -15,14 +18,17 @@ ShareLink is a lightweight script that enables easy social media sharing functio
 - Error handling for unsupported platforms
 
 ## Usage
+
 Add the script to your project and include the required attributes on your sharing elements.
 
 ### Installation
+
 ```html
 <script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/Functional/ShareLink.min.js"></script>
 ```
 
 ### Required Attributes
+
 - `wt-share-element="platform"` - Applied to the sharing link/button, where platform is one of:
   - `facebook`
   - `twitter`
@@ -33,6 +39,7 @@ Add the script to your project and include the required attributes on your shari
   - `copy` (for copy to clipboard functionality)
 
 ## Considerations
+
 1. **URL Encoding**: Automatically handles URL encoding for special characters
 2. **Meta Data**: Uses document title for sharing descriptions
 3. **Multiple Instances**: Supports multiple share buttons on the same page
@@ -42,6 +49,7 @@ Add the script to your project and include the required attributes on your shari
 ## Examples
 
 ### Basic Implementation
+
 ```html
 <!-- Facebook share button -->
 <a wt-share-element="facebook">Share on Facebook</a>
@@ -54,6 +62,7 @@ Add the script to your project and include the required attributes on your shari
 ```
 
 ### Complete Social Media Implementation
+
 ```html
 <div class="social-share">
     <a wt-share-element="facebook">Facebook</a>
@@ -67,8 +76,9 @@ Add the script to your project and include the required attributes on your shari
 ```
 
 ### Common Use Cases
+
 1. Blog post sharing
 2. Product sharing on e-commerce sites
 3. Social media integration
 4. Content distribution
-5. Portfolio sharing
\ No newline at end of file
+5. Portfolio sharing
diff --git a/docs/WebflowOnly/CMSFilter.md b/docs/WebflowOnly/CMSFilter.md
index 071a04a..c2f4002 100644
--- a/docs/WebflowOnly/CMSFilter.md
+++ b/docs/WebflowOnly/CMSFilter.md
@@ -1,12 +1,15 @@
 # CMSFilter
 
 ## Version
+
 Current Version: 1.1.0
 
 ## Description
+
 CMSFilter is a powerful Webflow-specific script that provides advanced filtering capabilities for CMS collections. It supports multiple filter types, pagination, sorting, dynamic filtering with real-time updates, and performance optimizations including debounced input handling.
 
 ## Functionality
+
 - Multiple filter types (checkbox, radio, text, range)
 - Advanced filtering with dynamic availability updates
 - Pagination support with auto-loading across pages
@@ -24,20 +27,25 @@ CMSFilter is a powerful Webflow-specific script that provides advanced filtering
 - Custom pagination controls
 
 ## Usage
+
 Add the script to your Webflow project and include the required attributes on your filtering elements.
 
 ### Installation
+
 ```html
 <script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/WebflowOnly/CMSFilter.min.js"></script>
 ```
 
 ### Required Attributes
+
 - `wt-cmsfilter-element="filter-form"` - Applied to the form container
 - `wt-cmsfilter-element="list"` - Applied to the CMS list container
 - `wt-cmsfilter-category="category-name"` - Applied to filter inputs
 
 ### Optional Attributes
+
 #### Core Filter Attributes
+
 - `wt-cmsfilter-filtering="advanced"` - Enables advanced filtering mode with dynamic availability updates
 - `wt-cmsfilter-trigger="button"` - Changes filter trigger to button submit instead of real-time
 - `wt-cmsfilter-class="classname"` - CSS class applied to active filter elements
@@ -45,6 +53,7 @@ Add the script to your Webflow project and include the required attributes on yo
 - `wt-cmsfilter-debounce="300"` - Debounce delay in milliseconds for input events (default: 300ms)
 
 #### Pagination Attributes
+
 - `wt-cmsfilter-element="pagination-wrapper"` - Container for pagination controls (required for multi-page filtering)
 - `wt-cmsfilter-loadmode="paginate|load-all"` - Controls how items are loaded and displayed
 - `wt-cmsfilter-pagination="prev|next"` - Default Webflow pagination buttons
@@ -52,6 +61,7 @@ Add the script to your Webflow project and include the required attributes on yo
 - `wt-cmsfilter-element="page-count"` - Displays current page and total pages
 
 #### Additional Elements
+
 - `wt-cmsfilter-element="results-count"` - Shows the number of filtered results
 - `wt-cmsfilter-element="empty"` - Element shown when no results are found
 - `wt-cmsfilter-empty-max="n"` - Optional on the empty element; accepts positive whole integers only (`1+`) and shows empty block when filtered results are ≤ n. Missing, `0`, or invalid values default to `0` (show only when there are zero results; e.g. `wt-cmsfilter-empty-max="3"` shows at 3 or fewer). Valid: `1`, `2`, `3`. Invalid: `0`, `3.5`, `3px`, `-1`, `abc`.
@@ -62,13 +72,16 @@ Add the script to your Webflow project and include the required attributes on yo
 - `wt-cmsfilter-element="tag-remove"` - Remove button within tag template
 
 #### Range Filter Attributes
+
 - `wt-cmsfilter-range="from|to"` - Specifies range filter input type (minimum or maximum)
 - `wt-cmsfilter-default="value"` - Default value for range inputs (used for comparison)
 
 #### Tag Template Attributes
+
 - `wt-cmsfilter-tag-category="true|false"` - Whether to show category name in tags (default: true)
 
 ## Considerations
+
 1. **Initialization**: Automatically initializes when DOM is ready
 2. **Performance**: Optimized for large collections with pagination and debounced inputs
 3. **Compatibility**: Works with Webflow's native CMS and IX2
@@ -83,6 +96,7 @@ Add the script to your Webflow project and include the required attributes on yo
 ## Examples
 
 ### Basic Filter Implementation
+
 ```html
 <form wt-cmsfilter-element="filter-form" wt-cmsfilter-debounce="250">
     <!-- Checkbox filters -->
@@ -121,6 +135,7 @@ Add the script to your Webflow project and include the required attributes on yo
 ```
 
 ### Advanced Implementation with Pagination and Tags
+
 ```html
 <form wt-cmsfilter-element="filter-form" 
       wt-cmsfilter-filtering="advanced"
@@ -196,6 +211,7 @@ Add the script to your Webflow project and include the required attributes on yo
 ```
 
 ### Button-Triggered Filtering
+
 ```html
 <form wt-cmsfilter-element="filter-form" wt-cmsfilter-trigger="button">
     <!-- Filters -->
@@ -217,6 +233,7 @@ Add the script to your Webflow project and include the required attributes on yo
 ```
 
 ### Common Use Cases
+
 1. E-commerce product filtering with price ranges and categories
 2. Blog post categorization with tags and search
 3. Portfolio filtering by project type and skills
@@ -227,6 +244,7 @@ Add the script to your Webflow project and include the required attributes on yo
 8. Job board with location, salary, and category filters
 
 ### Performance Tips
+
 - Use debouncing for text inputs in large collections (adjust `wt-cmsfilter-debounce` value)
 - Enable pagination for collections with 50+ items
 - Use advanced filtering mode only when needed for better performance
@@ -234,7 +252,9 @@ Add the script to your Webflow project and include the required attributes on yo
 - Consider using button-triggered filtering for complex filter sets
 
 ### Data Attribute Requirements
+
 Your CMS items should include data attributes that match your filter categories. For example:
+
 ```html
 <div class="cms-item" data-category="electronics" data-price="299" data-brand="apple">
     <!-- Item content -->
@@ -242,11 +262,13 @@ Your CMS items should include data attributes that match your filter categories.
 ```
 
 ### JavaScript API
+
 Access the filter instance globally:
 
 > **Note:** The following example uses [optional chaining (`?.`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining), which is supported in all modern browsers but **not** in Internet Explorer or some older browsers. If you need to support older browsers, use the alternative code below.
 
 **Modern browsers (with optional chaining):**
+
 ```javascript
 // Get the filter instance
 const filterInstance = window.webtricks.find(item => item.CMSFilter)?.CMSFilter;
@@ -259,4 +281,4 @@ filterInstance.ApplyFilters();
 
 // Clear all filters
 filterInstance.ClearAllFilters();
-```
\ No newline at end of file
+```
diff --git a/docs/WebflowOnly/CMSSelect.md b/docs/WebflowOnly/CMSSelect.md
index 3e6a8f1..6ad1b9c 100644
--- a/docs/WebflowOnly/CMSSelect.md
+++ b/docs/WebflowOnly/CMSSelect.md
@@ -1,42 +1,52 @@
 # CMSSelect
 
 ## Version
+
 Current Version: 1.0.0
 
 ## Description
+
 CMSSelect is a Webflow-specific script that automatically populates select elements with options from CMS content. It's particularly useful for creating dynamic dropdowns from CMS collection items or when you need to convert CMS content into selectable options.
 
 ## Functionality
+
 - Automatically populates select elements with options from CMS content
 - Supports multiple select elements on the same page
 - Handles custom values and text content
 - Error handling and validation
 - Automatic initialization on page load
- - Programmatic initialization available via `InitializeCMSSelect` (CommonJS export)
+- Programmatic initialization available via `InitializeCMSSelect` (CommonJS export)
 
 ## Usage
+
 Add the script to your Webflow project and include the required attributes on your select element and option sources.
 
 ### Installation
+
 ```html
 <script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/WebflowOnly/CMSSelect.min.js"></script>
 ```
 
 ### Required Attributes
+
 For a single select:
+
 - `wt-cmsselect-element="select"` - Applied to the select element
 - `wt-cmsselect-element="target"` - Applied to elements that will become options
 
 For multiple selects:
+
 - `wt-cmsselect-element="select-1"` - Applied to the first select element
 - `wt-cmsselect-element="target-1"` - Applied to options for the first select
 - `wt-cmsselect-element="select-2"` - Applied to the second select element
 - `wt-cmsselect-element="target-2"` - Applied to options for the second select
 
 ### Optional Attributes
+
 - `wt-cmsselect-value="custom-value"` - Custom value for the option (if different from text content)
 
 ## Considerations
+
 1. **Empty Values**: Options with empty text content are ignored
 2. **Value Handling**: Uses text content as value if no custom value is provided
 3. **Multiple Instances**: Supports multiple independent select elements
@@ -46,6 +56,7 @@ For multiple selects:
 ## Examples
 
 ### Basic Implementation
+
 ```html
 <select wt-cmsselect-element="select">
     <!-- Will be populated automatically -->
@@ -58,6 +69,7 @@ For multiple selects:
 ```
 
 ### Multiple Selects Implementation
+
 ```html
 <!-- First select -->
 <select wt-cmsselect-element="select-1"></select>
@@ -71,6 +83,7 @@ For multiple selects:
 ```
 
 ### Custom Values Implementation
+
 ```html
 <select wt-cmsselect-element="select"></select>
 
@@ -79,6 +92,7 @@ For multiple selects:
 ```
 
 ### Common Use Cases
+
 1. Creating dropdowns from CMS collections
 2. Dynamic filtering interfaces
 3. Form select population
@@ -86,9 +100,10 @@ For multiple selects:
 5. Dynamic navigation menus
 
 ### Programmatic usage (testing/bundlers)
+
 When using in a bundler or testing environment, you can import the initializer:
 
 ```js
 const { InitializeCMSSelect } = require('../../Dist/WebflowOnly/CMSSelect.js');
 InitializeCMSSelect();
-```
\ No newline at end of file
+```
diff --git a/docs/WebflowOnly/HideContainer.md b/docs/WebflowOnly/HideContainer.md
index 250639b..6daf6ad 100644
--- a/docs/WebflowOnly/HideContainer.md
+++ b/docs/WebflowOnly/HideContainer.md
@@ -1,12 +1,15 @@
 # HideContainer
 
 ## Version
+
 Current Version: 1.0.0
 
 ## Description
+
 HideContainer is a Webflow-specific script that manages container visibility based on empty states. It's particularly useful for handling CMS collections or dynamic content containers where you want to hide or remove the container when specific conditions are met.
 
 ## Functionality
+
 - Automatically hides or removes containers based on empty states
 - Supports both hiding and complete removal of containers
 - Simple configuration through HTML attributes
@@ -14,21 +17,26 @@ HideContainer is a Webflow-specific script that manages container visibility bas
 - Lightweight and efficient
 
 ## Usage
+
 Add the script to your Webflow project and include the required attributes on your container elements.
 
 ### Installation
+
 ```html
 <script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/WebflowOnly/HideContainer.min.js"></script>
 ```
 
 ### Required Attributes
+
 - `wt-hidecontainer-element="container"` - Applied to the main container that might need hiding
 - `wt-hidecontainer-element="empty"` - Applied to the element that indicates an empty state
 
 ### Optional Attributes
+
 - `wt-hidecontainer-remove="true"` - If present, the container will be removed from DOM instead of being hidden
 
 ## Considerations
+
 1. **Display Handling**: By default, containers are hidden using `display: none`
 2. **DOM Removal**: When using the remove attribute, the container is completely removed from the DOM
 3. **Empty State Detection**: Relies on the presence of an element with the empty state attribute
@@ -38,6 +46,7 @@ Add the script to your Webflow project and include the required attributes on yo
 ## Examples
 
 ### Basic Implementation (Hide Container)
+
 ```html
 <div wt-hidecontainer-element="container">
     <div class="content">
@@ -48,6 +57,7 @@ Add the script to your Webflow project and include the required attributes on yo
 ```
 
 ### Implementation with Container Removal
+
 ```html
 <div wt-hidecontainer-element="container" wt-hidecontainer-remove="true">
     <div class="content">
@@ -58,8 +68,9 @@ Add the script to your Webflow project and include the required attributes on yo
 ```
 
 ### Common Use Cases
+
 1. Hiding empty CMS collection lists
 2. Managing visibility of dynamic content containers
 3. Handling no-results states in search functionality
 4. Conditional content display
-5. Empty state management in filtered content
\ No newline at end of file
+5. Empty state management in filtered content
diff --git a/docs/WebflowOnly/MirrorClick.md b/docs/WebflowOnly/MirrorClick.md
index fc032af..6ebd589 100644
--- a/docs/WebflowOnly/MirrorClick.md
+++ b/docs/WebflowOnly/MirrorClick.md
@@ -1,12 +1,15 @@
 # MirrorClick
 
 ## Version
+
 Current Version: 1.0.0
 
 ## Description
+
 MirrorClick is a Webflow-specific script that allows you to mirror click events from one element to another. When a trigger element is clicked, it automatically triggers a click event on a corresponding target element. This is particularly useful for creating synchronized interactions or controlling multiple elements with a single click.
 
 ## Functionality
+
 - Mirrors click events from trigger elements to target elements
 - Supports multiple trigger-target pairs
 - Automatic initialization on page load
@@ -14,19 +17,24 @@ MirrorClick is a Webflow-specific script that allows you to mirror click events
 - No interference with other click handlers
 
 ## Usage
+
 Add the script to your Webflow project and include the required attributes on your trigger and target elements.
 
 ### Installation
+
 ```html
 <script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/WebflowOnly/MirrorClick.min.js"></script>
 ```
 
 ### Required Attributes
+
 For a single pair:
+
 - `wt-mirrorclick-element="trigger"` - Applied to the element that will trigger the click
 - `wt-mirrorclick-element="target"` - Applied to the element that will receive the mirrored click
 
 For multiple pairs:
+
 - `wt-mirrorclick-element="trigger-1"` - Applied to the first trigger element
 - `wt-mirrorclick-element="target-1"` - Applied to the first target element
 - `wt-mirrorclick-element="trigger-2"` - Applied to the second trigger element
@@ -34,6 +42,7 @@ For multiple pairs:
 (And so on for additional pairs)
 
 ## Considerations
+
 1. **Event Propagation**: The mirrored click is a genuine click event on the target element
 2. **Error Handling**: Gracefully handles missing or incorrect target elements
 3. **Multiple Instances**: Supports multiple trigger-target pairs on the same page
@@ -43,6 +52,7 @@ For multiple pairs:
 ## Examples
 
 ### Basic Implementation
+
 ```html
 <!-- Single pair example -->
 <button wt-mirrorclick-element="trigger">Click Me</button>
@@ -50,6 +60,7 @@ For multiple pairs:
 ```
 
 ### Multiple Pairs Implementation
+
 ```html
 <!-- Multiple pairs example -->
 <button wt-mirrorclick-element="trigger-1">Trigger 1</button>
@@ -60,8 +71,9 @@ For multiple pairs:
 ```
 
 ### Common Use Cases
+
 1. Synchronized tab switching
 2. Multiple button controls
 3. Hidden element triggering
 4. Form submission from multiple locations
-5. Modal/popup controls
\ No newline at end of file
+5. Modal/popup controls
diff --git a/docs/WebflowOnly/RenderStatic.md b/docs/WebflowOnly/RenderStatic.md
index 8c71284..d2e9e2d 100644
--- a/docs/WebflowOnly/RenderStatic.md
+++ b/docs/WebflowOnly/RenderStatic.md
@@ -1,12 +1,15 @@
 # RenderStatic
 
 ## Version
+
 Current Version: 1.0.0
 
 ## Description
+
 RenderStatic is a Webflow-specific script that allows you to automatically insert cloned elements at specified intervals within a container. It's particularly useful for creating dynamic layouts where you need to repeat certain elements at regular intervals among existing content.
 
 ## Functionality
+
 - Automatically clones and inserts elements at specified intervals
 - Maintains proper spacing between original and cloned elements
 - Supports multiple different cloneable elements
@@ -15,21 +18,26 @@ RenderStatic is a Webflow-specific script that allows you to automatically inser
 - Smart reinitialization on content changes
 
 ## Usage
+
 Add the script to your Webflow project and include the required attributes on your container and cloneable elements.
 
 ### Installation
+
 ```html
 <script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/WebflowOnly/RenderStatic.min.js"></script>
 ```
 
 ### Required Attributes
+
 - `wt-renderstatic-element="container"` - Applied to the main container where elements will be inserted
 - `wt-renderstatic-element="cloneable"` - Applied to elements that will be cloned and inserted
 
 ### Optional Attributes
+
 - `wt-renderstatic-gap="1"` - Number of elements to skip before inserting a clone (default: 1)
 
 ## Considerations
+
 1. **DOM Updates**: The script automatically observes container changes and reinitializes when needed
 2. **Element Order**: Cloned elements are inserted at calculated positions based on the gap value
 3. **Multiple Cloneables**: If multiple cloneable elements are defined, they will be used in sequence
@@ -39,6 +47,7 @@ Add the script to your Webflow project and include the required attributes on yo
 ## Examples
 
 ### Basic Implementation
+
 ```html
 <div class="container" wt-renderstatic-element="container">
     <div>Original Item 1</div>
@@ -49,6 +58,7 @@ Add the script to your Webflow project and include the required attributes on yo
 ```
 
 ### With Custom Gap and Multiple Cloneables
+
 ```html
 <div class="container" wt-renderstatic-element="container" wt-renderstatic-gap="2">
     <div>Original Item 1</div>
@@ -58,4 +68,4 @@ Add the script to your Webflow project and include the required attributes on yo
     <div wt-renderstatic-element="cloneable">Cloneable 1</div>
     <div wt-renderstatic-element="cloneable">Cloneable 2</div>
 </div>
-```
\ No newline at end of file
+```
diff --git a/docs/WebflowOnly/TabsSlider.md b/docs/WebflowOnly/TabsSlider.md
index 28426fe..06f4d8a 100644
--- a/docs/WebflowOnly/TabsSlider.md
+++ b/docs/WebflowOnly/TabsSlider.md
@@ -1,12 +1,15 @@
 # TabsSlider
 
 ## Version
+
 Current Version: 1.0.0
 
 ## Description
+
 TabsSlider is a Webflow-specific script that adds automatic sliding functionality to Webflow's native tab components. It enables automatic rotation between tabs with configurable timing and pause-on-hover functionality.
 
 ## Functionality
+
 - Automatic rotation between tabs at specified intervals
 - Configurable slide timing
 - Pause-on-hover capability
@@ -15,22 +18,27 @@ TabsSlider is a Webflow-specific script that adds automatic sliding functionalit
 - Error handling and graceful degradation
 
 ## Usage
+
 Add the script to your Webflow project and include the required attributes on your tabs component.
 
 ### Installation
+
 ```html
 <script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/WebflowOnly/TabsSlider.min.js"></script>
 ```
 
 ### Required Attributes
+
 - `wt-tabslider-element="tabs"` - Applied to the main tabs container
 - `wt-tabslider-element="menu"` - Applied to the tabs menu/navigation container
 
 ### Optional Attributes
+
 - `wt-tabslider-speed="5000"` - Set the sliding speed in milliseconds (default: 5000ms)
 - `wt-tabslider-pauseonhover="true"` - Enable/disable pause on hover functionality (default: false)
 
 ## Considerations
+
 1. **Webflow Dependency**: This script requires Webflow's native tabs component to function
 2. **Browser Compatibility**: Includes special handling for Safari browsers
 3. **Performance**: Uses debouncing for hover events to optimize performance
@@ -39,6 +47,7 @@ Add the script to your Webflow project and include the required attributes on yo
 ## Examples
 
 ### Basic Implementation
+
 ```html
 <div class="tabs-component" wt-tabslider-element="tabs">
     <div class="tabs-menu" wt-tabslider-element="menu">
@@ -51,6 +60,7 @@ Add the script to your Webflow project and include the required attributes on yo
 ```
 
 ### With Custom Speed and Hover Pause
+
 ```html
 <div class="tabs-component" 
      wt-tabslider-element="tabs"
@@ -63,4 +73,4 @@ Add the script to your Webflow project and include the required attributes on yo
         <!-- Tab content here -->
     </div>
 </div>
-```
\ No newline at end of file
+```
diff --git a/package-lock.json b/package-lock.json
index 71519f4..f75581b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "webtricks",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "webtricks",
-      "version": "0.1.0",
+      "version": "1.0.0",
       "devDependencies": {
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0"

From 4926cf11c9960393e934d4f2a9d620650363eed3 Mon Sep 17 00:00:00 2001
From: matthewcsimpson <mcsimpson@gmail.com>
Date: Thu, 19 Mar 2026 11:31:51 -0700
Subject: [PATCH 02/15] css revision

---
 Dist/Functional/RangeSliderSimple.js | 53 +++++-----------------------
 1 file changed, 9 insertions(+), 44 deletions(-)

diff --git a/Dist/Functional/RangeSliderSimple.js b/Dist/Functional/RangeSliderSimple.js
index 5a1d554..3eeecc0 100644
--- a/Dist/Functional/RangeSliderSimple.js
+++ b/Dist/Functional/RangeSliderSimple.js
@@ -173,10 +173,12 @@ class RangeSliderSimple {
 
         const style = document.createElement('style');
         style.id = 'wt-rangeslidersimple-styles';
+        /* Layout only: no appearance:none or ::-webkit-slider-* / ::-moz-range-* so thumbs/tracks stay browser-default. */
         style.textContent = `
     [${ATTR_PREFIX}-element="slider"] {
         position: relative;
-        min-height: 32px;
+        min-height: 2.75rem;
+        box-sizing: border-box;
     }
 
     [${ATTR_PREFIX}-element="input-left"],
@@ -184,56 +186,19 @@ class RangeSliderSimple {
         position: absolute;
         left: 0;
         width: 100%;
-        top: 0;
-        bottom: 0;
-        margin: auto;
-        height: 24px;
-        -webkit-appearance: none;
-        appearance: none;
-        background: transparent;
+        max-width: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
         pointer-events: auto;
         z-index: 2;
-        outline: none;
     }
 
     [${ATTR_PREFIX}-element="input-right"] {
         z-index: 1;
     }
-
-    [${ATTR_PREFIX}-element="input-left"]::-webkit-slider-thumb,
-    [${ATTR_PREFIX}-element="input-right"]::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        width: 18px;
-        height: 18px;
-        border-radius: 50%;
-        background: #222;
-        cursor: pointer;
-        pointer-events: auto;
-    }
-
-    [${ATTR_PREFIX}-element="input-left"]::-moz-range-thumb,
-    [${ATTR_PREFIX}-element="input-right"]::-moz-range-thumb {
-        width: 18px;
-        height: 18px;
-        border-radius: 50%;
-        background: #222;
-        cursor: pointer;
-        border: none;
-    }
-
-    [${ATTR_PREFIX}-element="input-left"]::-webkit-slider-runnable-track,
-    [${ATTR_PREFIX}-element="input-right"]::-webkit-slider-runnable-track {
-        height: 6px;
-        border-radius: 3px;
-        background: rgba(0, 0, 0, 0.12);
-    }
-
-    [${ATTR_PREFIX}-element="input-left"]::-moz-range-track,
-    [${ATTR_PREFIX}-element="input-right"]::-moz-range-track {
-        height: 6px;
-        border-radius: 3px;
-        background: rgba(0, 0, 0, 0.12);
-    }
     `;
         document.head.appendChild(style);
     }

From 302d497e4927123dd8efa01d330ba32408baef20 Mon Sep 17 00:00:00 2001
From: matthewcsimpson <mcsimpson@gmail.com>
Date: Thu, 19 Mar 2026 11:35:08 -0700
Subject: [PATCH 03/15] vnumber

---
 Dist/Functional/RangeSliderSimple.js | 1 +
 docs/Functional/RangeSliderSimple.md | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/Dist/Functional/RangeSliderSimple.js b/Dist/Functional/RangeSliderSimple.js
index 3eeecc0..9d123d7 100644
--- a/Dist/Functional/RangeSliderSimple.js
+++ b/Dist/Functional/RangeSliderSimple.js
@@ -1,5 +1,6 @@
 /*!
  * WebTricks — RangeSliderSimple
+ * @version 0.0.2 — pre-release; bump patch (and docs/Functional/RangeSliderSimple.md) on every change to this file.
  * Dual native range inputs (no custom thumb DOM). Self-contained (single script tag).
  * MIT License
  */
diff --git a/docs/Functional/RangeSliderSimple.md b/docs/Functional/RangeSliderSimple.md
index 6d9ebd4..136a493 100644
--- a/docs/Functional/RangeSliderSimple.md
+++ b/docs/Functional/RangeSliderSimple.md
@@ -1,5 +1,9 @@
 # RangeSliderSimple
 
+## Version
+
+Current version: **0.0.2** (pre-release — see banner in `Dist/Functional/RangeSliderSimple.js`; bump patch and this line when the script changes).
+
 ## Description
 
 `RangeSliderSimple` is a dual-handle range control built from two native `<input type="range">` elements. The draggable thumbs you see are the browser’s own controls, so hit targets stay aligned with the visuals. The file is **self-contained** (same core behavior as `RangeSlider`, inlined—keep edits in sync manually if you change constraint/display logic).

From aa98ae5ad0d10b5feb87c6908775997df8c63862 Mon Sep 17 00:00:00 2001
From: matthewcsimpson <mcsimpson@gmail.com>
Date: Thu, 19 Mar 2026 11:46:22 -0700
Subject: [PATCH 04/15] simplify

---
 Dist/Functional/RangeSliderSimple.js | 129 +++++++++++++++++++++++++--
 docs/Functional/RangeSlider.md       |   2 +
 docs/Functional/RangeSliderSimple.md |  19 +++-
 3 files changed, 139 insertions(+), 11 deletions(-)

diff --git a/Dist/Functional/RangeSliderSimple.js b/Dist/Functional/RangeSliderSimple.js
index 9d123d7..1367091 100644
--- a/Dist/Functional/RangeSliderSimple.js
+++ b/Dist/Functional/RangeSliderSimple.js
@@ -1,6 +1,6 @@
 /*!
  * WebTricks — RangeSliderSimple
- * @version 0.0.2 — pre-release; bump patch (and docs/Functional/RangeSliderSimple.md) on every change to this file.
+ * @version 0.0.5 — pre-release; bump patch (and docs/Functional/RangeSliderSimple.md) on every change to this file.
  * Dual native range inputs (no custom thumb DOM). Self-contained (single script tag).
  * MIT License
  */
@@ -174,36 +174,125 @@ class RangeSliderSimple {
 
         const style = document.createElement('style');
         style.id = 'wt-rangeslidersimple-styles';
-        /* Layout only: no appearance:none or ::-webkit-slider-* / ::-moz-range-* so thumbs/tracks stay browser-default. */
+        /* MDN-like range UI (Chrome docs): blue filled track, grey remainder, white pill thumb.
+           --wt-rs-track-fill defaults to #3b82f6 (typical RangeSlider [range] bar in docs). */
         style.textContent = `
     [${ATTR_PREFIX}-element="slider"] {
+        --wt-rs-track-fill: #3b82f6;
+        --wt-rs-track-bg: #e5e7eb;
+        --wt-rs-thumb-bg: #ffffff;
+        --wt-rs-thumb-border: #cbd5e1;
+        --wt-rs-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
         position: relative;
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr;
+        align-items: center;
+        justify-items: stretch;
         min-height: 2.75rem;
         box-sizing: border-box;
     }
 
-    [${ATTR_PREFIX}-element="input-left"],
-    [${ATTR_PREFIX}-element="input-right"] {
-        position: absolute;
-        left: 0;
+    input[type="range"][${ATTR_PREFIX}-element="input-left"],
+    input[type="range"][${ATTR_PREFIX}-element="input-right"] {
+        grid-column: 1;
+        grid-row: 1;
         width: 100%;
         max-width: 100%;
-        top: 50%;
-        transform: translateY(-50%);
         margin: 0;
         padding: 0;
         box-sizing: border-box;
         pointer-events: auto;
         z-index: 2;
+        height: 1.5rem;
+        min-height: 1.5rem;
+        background: transparent;
+        -webkit-appearance: none !important;
+        appearance: none !important;
+        -moz-appearance: none !important;
     }
 
-    [${ATTR_PREFIX}-element="input-right"] {
+    input[type="range"][${ATTR_PREFIX}-element="input-right"] {
         z-index: 1;
     }
+
+    input[type="range"][${ATTR_PREFIX}-element="input-left"]::-webkit-slider-runnable-track,
+    input[type="range"][${ATTR_PREFIX}-element="input-right"]::-webkit-slider-runnable-track {
+        height: 6px;
+        border-radius: 3px;
+        background: linear-gradient(
+            to right,
+            var(--wt-rs-track-fill) 0%,
+            var(--wt-rs-track-fill) var(--wt-rs-pct, 0%),
+            var(--wt-rs-track-bg) var(--wt-rs-pct, 0%),
+            var(--wt-rs-track-bg) 100%
+        );
+    }
+
+    input[type="range"][${ATTR_PREFIX}-element="input-left"]::-webkit-slider-thumb,
+    input[type="range"][${ATTR_PREFIX}-element="input-right"]::-webkit-slider-thumb {
+        -webkit-appearance: none !important;
+        width: 12px;
+        height: 16px;
+        margin-top: -5px;
+        border-radius: 8px;
+        background: var(--wt-rs-thumb-bg);
+        border: 1px solid var(--wt-rs-thumb-border);
+        box-shadow: var(--wt-rs-thumb-shadow);
+        cursor: pointer;
+    }
+
+    input[type="range"][${ATTR_PREFIX}-element="input-left"]::-moz-range-track,
+    input[type="range"][${ATTR_PREFIX}-element="input-right"]::-moz-range-track {
+        height: 6px;
+        border-radius: 3px;
+        background: var(--wt-rs-track-bg);
+        border: none;
+    }
+
+    input[type="range"][${ATTR_PREFIX}-element="input-left"]::-moz-range-progress,
+    input[type="range"][${ATTR_PREFIX}-element="input-right"]::-moz-range-progress {
+        height: 6px;
+        border-radius: 3px;
+        background: var(--wt-rs-track-fill);
+        border: none;
+    }
+
+    input[type="range"][${ATTR_PREFIX}-element="input-left"]::-moz-range-thumb,
+    input[type="range"][${ATTR_PREFIX}-element="input-right"]::-moz-range-thumb {
+        width: 12px;
+        height: 16px;
+        border-radius: 8px;
+        background: var(--wt-rs-thumb-bg);
+        border: 1px solid var(--wt-rs-thumb-border);
+        box-shadow: var(--wt-rs-thumb-shadow);
+        cursor: pointer;
+    }
+
+    input[type="range"][${ATTR_PREFIX}-element="input-left"]:focus-visible,
+    input[type="range"][${ATTR_PREFIX}-element="input-right"]:focus-visible {
+        outline: 2px solid var(--wt-rs-track-fill);
+        outline-offset: 2px;
+    }
     `;
         document.head.appendChild(style);
     }
 
+    syncTrackFillPercents() {
+        if (!this.inputLeft || !this.inputRight) return;
+        [this.inputLeft, this.inputRight].forEach((input) => {
+            const min = parseInt(input.min, 10);
+            const max = parseInt(input.max, 10);
+            const val = parseInt(input.value, 10);
+            const safeMin = Number.isFinite(min) ? min : 0;
+            const safeMax = Number.isFinite(max) ? max : 100;
+            const safeVal = Number.isFinite(val) ? val : safeMin;
+            const pct =
+                safeMax <= safeMin ? 0 : ((safeVal - safeMin) / (safeMax - safeMin)) * 100;
+            input.style.setProperty('--wt-rs-pct', `${pct}%`);
+        });
+    }
+
     initConfig() {
         const cfg = this.rs.readSliderConfig(this.slider, ATTR_PREFIX);
         this.sliderMin = cfg.sliderMin;
@@ -213,6 +302,15 @@ class RangeSliderSimple {
         this.rightSuffix = cfg.rightSuffix;
         this.defaultSuffix = cfg.defaultSuffix;
         this.shouldFormatNumber = cfg.shouldFormatNumber;
+
+        const trackFill = this.slider.getAttribute(`${ATTR_PREFIX}-trackfill`);
+        if (trackFill) {
+            this.slider.style.setProperty('--wt-rs-track-fill', trackFill);
+        }
+        const trackBg = this.slider.getAttribute(`${ATTR_PREFIX}-trackbg`);
+        if (trackBg) {
+            this.slider.style.setProperty('--wt-rs-track-bg', trackBg);
+        }
     }
 
     initElements() {
@@ -298,6 +396,8 @@ class RangeSliderSimple {
                 this.shouldFormatNumber,
             );
         }
+
+        this.syncTrackFillPercents();
     }
 
     updateRightValues(value) {
@@ -332,6 +432,8 @@ class RangeSliderSimple {
                 this.defaultSuffix,
             );
         }
+
+        this.syncTrackFillPercents();
     }
 
     setupEventListeners() {
@@ -432,6 +534,15 @@ const initializeRangeSliderSimple = () => {
             const instance = new RangeSliderSimple(wrapper);
             window.webtricks.push({ RangeSliderSimple: instance });
         });
+
+        const bumpStyleOrder = () => {
+            const injectedStyle = document.getElementById('wt-rangeslidersimple-styles');
+            if (injectedStyle && document.head) {
+                document.head.appendChild(injectedStyle);
+            }
+        };
+        bumpStyleOrder();
+        setTimeout(bumpStyleOrder, 0);
     } catch (err) {
         console.error(`RangeSliderSimple initialization error: ${err.message}`);
     }
diff --git a/docs/Functional/RangeSlider.md b/docs/Functional/RangeSlider.md
index 4ecfab1..f1ebb7a 100644
--- a/docs/Functional/RangeSlider.md
+++ b/docs/Functional/RangeSlider.md
@@ -50,6 +50,8 @@ Self-contained: **one** script tag. Use [jsDelivr](https://www.jsdelivr.com/) (n
 - `wt-rangeslider-max="100"` - Maximum value (default: 100)
 - `wt-rangeslider-steps="1"` - Step size (default: 1)
 
+Style the `[wt-rangeslider-element="range"]` bar in your CSS; examples often use **#3b82f6** for the fill. [RangeSliderSimple](./RangeSliderSimple.md) defaults its track fill to the same for visual parity.
+
 ### Optional Elements
 
 - `wt-rangeslider-range="from"` - Form input for start value
diff --git a/docs/Functional/RangeSliderSimple.md b/docs/Functional/RangeSliderSimple.md
index 136a493..7cdac52 100644
--- a/docs/Functional/RangeSliderSimple.md
+++ b/docs/Functional/RangeSliderSimple.md
@@ -2,11 +2,11 @@
 
 ## Version
 
-Current version: **0.0.2** (pre-release — see banner in `Dist/Functional/RangeSliderSimple.js`; bump patch and this line when the script changes).
+Current version: **0.0.5** (pre-release — see banner in `Dist/Functional/RangeSliderSimple.js`; bump patch and this line when the script changes).
 
 ## Description
 
-`RangeSliderSimple` is a dual-handle range control built from two native `<input type="range">` elements. The draggable thumbs you see are the browser’s own controls, so hit targets stay aligned with the visuals. The file is **self-contained** (same core behavior as `RangeSlider`, inlined—keep edits in sync manually if you change constraint/display logic).
+`RangeSliderSimple` is a dual-handle range control built from two `<input type="range">` elements. Styling follows the **default MDN / Chrome** pattern (blue filled track, grey remainder, white pill thumb); default fill **#3b82f6** matches typical `RangeSlider` `[range]` bar examples. Hit targets match the painted thumbs. The file is **self-contained** (same core behavior as `RangeSlider`, inlined—keep edits in sync manually if you change constraint/display logic).
 
 Use **`RangeSlider`** when you need custom thumb graphics or a separate range bar element. Use **`RangeSliderSimple`** when native appearance (plus your own CSS overrides) is enough.
 
@@ -40,6 +40,17 @@ Same semantics as `RangeSlider`, with the `wt-rangeslidersimple-` prefix:
 - `wt-rangeslidersimple-min`, `wt-rangeslidersimple-max`, `wt-rangeslidersimple-steps`
 - `wt-rangeslidersimple-mindifference`
 - `wt-rangeslidersimple-formatnumber`, `wt-rangeslidersimple-rightsuffix`, `wt-rangeslidersimple-defaultsuffix`
+- `wt-rangeslidersimple-trackfill` — optional CSS color for the filled portion of the track (default **#3b82f6**, aligned with common `RangeSlider` `[range]` bar examples)
+- `wt-rangeslidersimple-trackbg` — optional unfilled track color (default **#e5e7eb**)
+
+## Theming (CSS variables)
+
+On `[wt-rangeslidersimple-element="slider"]` you can override:
+
+- `--wt-rs-track-fill`, `--wt-rs-track-bg`
+- `--wt-rs-thumb-bg`, `--wt-rs-thumb-border`, `--wt-rs-thumb-shadow`
+
+Injected styling approximates the default **MDN / Chrome** range look (white vertical pill thumb, blue progress, grey track).
 
 ## Optional elements (inside wrapper)
 
@@ -79,3 +90,7 @@ Filter-driven min/max for collection ranges applies to **`wt-rangeslider-*`** on
 After init, instances are available on `window.webtricks` as `{ RangeSliderSimple: instance }`.
 
 - `setFrom(value)`, `setTo(value)`, `setRange(from, to)`, `reset()`
+
+## CodePen / global CSS
+
+The script injects complete **WebKit / Firefox** range pseudo-element styling so host resets (e.g. CodePen `input { appearance: none }`) do not leave unstyled thumbs. It also moves the injected `<style>` to the end of `<head>` (and on `setTimeout(0)`). Avoid duplicating conflicting `input[type=range]` rules in the Pen’s CSS panel; purge jsDelivr or pin a commit after updates.

From dc3f6db76f8686d3d301c37b43c1b54fa475d610 Mon Sep 17 00:00:00 2001
From: matthewcsimpson <mcsimpson@gmail.com>
Date: Thu, 19 Mar 2026 11:52:24 -0700
Subject: [PATCH 05/15] simplification

---
 .gitignore                           |  3 +-
 Dist/Functional/RangeSliderSimple.js | 57 ++++++++++++++++++++--------
 docs/Functional/RangeSliderSimple.md |  2 +-
 3 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/.gitignore b/.gitignore
index 417c6ce..dac9c29 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 node_modules/
-.vscode/
\ No newline at end of file
+.vscode/
+coverage/
\ No newline at end of file
diff --git a/Dist/Functional/RangeSliderSimple.js b/Dist/Functional/RangeSliderSimple.js
index 1367091..05dfa2d 100644
--- a/Dist/Functional/RangeSliderSimple.js
+++ b/Dist/Functional/RangeSliderSimple.js
@@ -1,6 +1,6 @@
 /*!
  * WebTricks — RangeSliderSimple
- * @version 0.0.5 — pre-release; bump patch (and docs/Functional/RangeSliderSimple.md) on every change to this file.
+ * @version 0.0.6 — pre-release; bump patch (and docs/Functional/RangeSliderSimple.md) on every change to this file.
  * Dual native range inputs (no custom thumb DOM). Self-contained (single script tag).
  * MIT License
  */
@@ -161,6 +161,7 @@ class RangeSliderSimple {
             this.addStyles();
             this.initConfig();
             this.initElements();
+            this.syncThemeVarsFromSliderToInputs();
             this.initState();
             this.setupEventListeners();
         } catch (err) {
@@ -170,7 +171,7 @@ class RangeSliderSimple {
 
     addStyles() {
         const existing = document.getElementById('wt-rangeslidersimple-styles');
-        if (existing) return;
+        if (existing) existing.remove();
 
         const style = document.createElement('style');
         style.id = 'wt-rangeslidersimple-styles';
@@ -195,6 +196,11 @@ class RangeSliderSimple {
 
     input[type="range"][${ATTR_PREFIX}-element="input-left"],
     input[type="range"][${ATTR_PREFIX}-element="input-right"] {
+        --wt-rs-track-fill: #3b82f6;
+        --wt-rs-track-bg: #e5e7eb;
+        --wt-rs-thumb-bg: #ffffff;
+        --wt-rs-thumb-border: #cbd5e1;
+        --wt-rs-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
         grid-column: 1;
         grid-row: 1;
         width: 100%;
@@ -222,10 +228,10 @@ class RangeSliderSimple {
         border-radius: 3px;
         background: linear-gradient(
             to right,
-            var(--wt-rs-track-fill) 0%,
-            var(--wt-rs-track-fill) var(--wt-rs-pct, 0%),
-            var(--wt-rs-track-bg) var(--wt-rs-pct, 0%),
-            var(--wt-rs-track-bg) 100%
+            var(--wt-rs-track-fill, #3b82f6) 0%,
+            var(--wt-rs-track-fill, #3b82f6) var(--wt-rs-pct, 0%),
+            var(--wt-rs-track-bg, #e5e7eb) var(--wt-rs-pct, 0%),
+            var(--wt-rs-track-bg, #e5e7eb) 100%
         );
     }
 
@@ -236,9 +242,9 @@ class RangeSliderSimple {
         height: 16px;
         margin-top: -5px;
         border-radius: 8px;
-        background: var(--wt-rs-thumb-bg);
-        border: 1px solid var(--wt-rs-thumb-border);
-        box-shadow: var(--wt-rs-thumb-shadow);
+        background: var(--wt-rs-thumb-bg, #ffffff);
+        border: 1px solid var(--wt-rs-thumb-border, #cbd5e1);
+        box-shadow: var(--wt-rs-thumb-shadow, 0 1px 2px rgba(0, 0, 0, 0.08));
         cursor: pointer;
     }
 
@@ -246,7 +252,7 @@ class RangeSliderSimple {
     input[type="range"][${ATTR_PREFIX}-element="input-right"]::-moz-range-track {
         height: 6px;
         border-radius: 3px;
-        background: var(--wt-rs-track-bg);
+        background: var(--wt-rs-track-bg, #e5e7eb);
         border: none;
     }
 
@@ -254,7 +260,7 @@ class RangeSliderSimple {
     input[type="range"][${ATTR_PREFIX}-element="input-right"]::-moz-range-progress {
         height: 6px;
         border-radius: 3px;
-        background: var(--wt-rs-track-fill);
+        background: var(--wt-rs-track-fill, #3b82f6);
         border: none;
     }
 
@@ -263,15 +269,15 @@ class RangeSliderSimple {
         width: 12px;
         height: 16px;
         border-radius: 8px;
-        background: var(--wt-rs-thumb-bg);
-        border: 1px solid var(--wt-rs-thumb-border);
-        box-shadow: var(--wt-rs-thumb-shadow);
+        background: var(--wt-rs-thumb-bg, #ffffff);
+        border: 1px solid var(--wt-rs-thumb-border, #cbd5e1);
+        box-shadow: var(--wt-rs-thumb-shadow, 0 1px 2px rgba(0, 0, 0, 0.08));
         cursor: pointer;
     }
 
     input[type="range"][${ATTR_PREFIX}-element="input-left"]:focus-visible,
     input[type="range"][${ATTR_PREFIX}-element="input-right"]:focus-visible {
-        outline: 2px solid var(--wt-rs-track-fill);
+        outline: 2px solid var(--wt-rs-track-fill, #3b82f6);
         outline-offset: 2px;
     }
     `;
@@ -293,6 +299,27 @@ class RangeSliderSimple {
         });
     }
 
+    /** WebKit range pseudos resolve theme vars on the input; copy from slider after config. */
+    syncThemeVarsFromSliderToInputs() {
+        if (!this.slider || !this.inputLeft || !this.inputRight) return;
+        const names = [
+            '--wt-rs-track-fill',
+            '--wt-rs-track-bg',
+            '--wt-rs-thumb-bg',
+            '--wt-rs-thumb-border',
+            '--wt-rs-thumb-shadow',
+        ];
+        const cs = getComputedStyle(this.slider);
+        names.forEach((name) => {
+            const val = cs.getPropertyValue(name);
+            if (val && val.trim()) {
+                const v = val.trim();
+                this.inputLeft.style.setProperty(name, v);
+                this.inputRight.style.setProperty(name, v);
+            }
+        });
+    }
+
     initConfig() {
         const cfg = this.rs.readSliderConfig(this.slider, ATTR_PREFIX);
         this.sliderMin = cfg.sliderMin;
diff --git a/docs/Functional/RangeSliderSimple.md b/docs/Functional/RangeSliderSimple.md
index 7cdac52..41c0f9c 100644
--- a/docs/Functional/RangeSliderSimple.md
+++ b/docs/Functional/RangeSliderSimple.md
@@ -2,7 +2,7 @@
 
 ## Version
 
-Current version: **0.0.5** (pre-release — see banner in `Dist/Functional/RangeSliderSimple.js`; bump patch and this line when the script changes).
+Current version: **0.0.6** (pre-release — see banner in `Dist/Functional/RangeSliderSimple.js`; bump patch and this line when the script changes).
 
 ## Description
 

From 24e5a896368bf77552d03293b2096b14caa3ae89 Mon Sep 17 00:00:00 2001
From: matthewcsimpson <mcsimpson@gmail.com>
Date: Thu, 19 Mar 2026 11:56:33 -0700
Subject: [PATCH 06/15] z-index changes

---
 Dist/Functional/RangeSliderSimple.js | 41 +++++++++++++++++-----------
 docs/Functional/RangeSliderSimple.md |  6 ++--
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/Dist/Functional/RangeSliderSimple.js b/Dist/Functional/RangeSliderSimple.js
index 05dfa2d..77d7209 100644
--- a/Dist/Functional/RangeSliderSimple.js
+++ b/Dist/Functional/RangeSliderSimple.js
@@ -1,6 +1,6 @@
 /*!
  * WebTricks — RangeSliderSimple
- * @version 0.0.6 — pre-release; bump patch (and docs/Functional/RangeSliderSimple.md) on every change to this file.
+ * @version 0.0.7 — pre-release; bump patch (and docs/Functional/RangeSliderSimple.md) on every change to this file.
  * Dual native range inputs (no custom thumb DOM). Self-contained (single script tag).
  * MIT License
  */
@@ -208,7 +208,8 @@ class RangeSliderSimple {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
-        pointer-events: auto;
+        pointer-events: none;
+        accent-color: transparent;
         z-index: 2;
         height: 1.5rem;
         min-height: 1.5rem;
@@ -218,12 +219,14 @@ class RangeSliderSimple {
         -moz-appearance: none !important;
     }
 
+    /* Later sibling paints on top; keep right above left when thumbs overlap. */
     input[type="range"][${ATTR_PREFIX}-element="input-right"] {
-        z-index: 1;
+        z-index: 3;
     }
 
     input[type="range"][${ATTR_PREFIX}-element="input-left"]::-webkit-slider-runnable-track,
     input[type="range"][${ATTR_PREFIX}-element="input-right"]::-webkit-slider-runnable-track {
+        pointer-events: none;
         height: 6px;
         border-radius: 3px;
         background: linear-gradient(
@@ -238,18 +241,22 @@ class RangeSliderSimple {
     input[type="range"][${ATTR_PREFIX}-element="input-left"]::-webkit-slider-thumb,
     input[type="range"][${ATTR_PREFIX}-element="input-right"]::-webkit-slider-thumb {
         -webkit-appearance: none !important;
-        width: 12px;
+        pointer-events: auto;
+        position: relative;
+        z-index: 1;
+        width: 16px;
         height: 16px;
         margin-top: -5px;
-        border-radius: 8px;
-        background: var(--wt-rs-thumb-bg, #ffffff);
-        border: 1px solid var(--wt-rs-thumb-border, #cbd5e1);
-        box-shadow: var(--wt-rs-thumb-shadow, 0 1px 2px rgba(0, 0, 0, 0.08));
+        border-radius: 50%;
+        background: var(--wt-rs-thumb-bg, #ffffff) !important;
+        border: 1px solid var(--wt-rs-thumb-border, #cbd5e1) !important;
+        box-shadow: var(--wt-rs-thumb-shadow, 0 1px 3px rgba(0, 0, 0, 0.12)) !important;
         cursor: pointer;
     }
 
     input[type="range"][${ATTR_PREFIX}-element="input-left"]::-moz-range-track,
     input[type="range"][${ATTR_PREFIX}-element="input-right"]::-moz-range-track {
+        pointer-events: none;
         height: 6px;
         border-radius: 3px;
         background: var(--wt-rs-track-bg, #e5e7eb);
@@ -258,6 +265,7 @@ class RangeSliderSimple {
 
     input[type="range"][${ATTR_PREFIX}-element="input-left"]::-moz-range-progress,
     input[type="range"][${ATTR_PREFIX}-element="input-right"]::-moz-range-progress {
+        pointer-events: none;
         height: 6px;
         border-radius: 3px;
         background: var(--wt-rs-track-fill, #3b82f6);
@@ -266,12 +274,13 @@ class RangeSliderSimple {
 
     input[type="range"][${ATTR_PREFIX}-element="input-left"]::-moz-range-thumb,
     input[type="range"][${ATTR_PREFIX}-element="input-right"]::-moz-range-thumb {
-        width: 12px;
+        pointer-events: auto;
+        width: 16px;
         height: 16px;
-        border-radius: 8px;
-        background: var(--wt-rs-thumb-bg, #ffffff);
-        border: 1px solid var(--wt-rs-thumb-border, #cbd5e1);
-        box-shadow: var(--wt-rs-thumb-shadow, 0 1px 2px rgba(0, 0, 0, 0.08));
+        border-radius: 50%;
+        background: var(--wt-rs-thumb-bg, #ffffff) !important;
+        border: 1px solid var(--wt-rs-thumb-border, #cbd5e1) !important;
+        box-shadow: var(--wt-rs-thumb-shadow, 0 1px 3px rgba(0, 0, 0, 0.12)) !important;
         cursor: pointer;
     }
 
@@ -387,10 +396,10 @@ class RangeSliderSimple {
 
     bringInputToFront(which) {
         if (which === 'left') {
-            this.inputLeft.style.zIndex = '3';
-            this.inputRight.style.zIndex = '1';
-        } else {
+            this.inputLeft.style.zIndex = '10';
             this.inputRight.style.zIndex = '3';
+        } else {
+            this.inputRight.style.zIndex = '10';
             this.inputLeft.style.zIndex = '2';
         }
     }
diff --git a/docs/Functional/RangeSliderSimple.md b/docs/Functional/RangeSliderSimple.md
index 41c0f9c..7992990 100644
--- a/docs/Functional/RangeSliderSimple.md
+++ b/docs/Functional/RangeSliderSimple.md
@@ -2,11 +2,11 @@
 
 ## Version
 
-Current version: **0.0.6** (pre-release — see banner in `Dist/Functional/RangeSliderSimple.js`; bump patch and this line when the script changes).
+Current version: **0.0.7** (pre-release — see banner in `Dist/Functional/RangeSliderSimple.js`; bump patch and this line when the script changes).
 
 ## Description
 
-`RangeSliderSimple` is a dual-handle range control built from two `<input type="range">` elements. Styling follows the **default MDN / Chrome** pattern (blue filled track, grey remainder, white pill thumb); default fill **#3b82f6** matches typical `RangeSlider` `[range]` bar examples. Hit targets match the painted thumbs. The file is **self-contained** (same core behavior as `RangeSlider`, inlined—keep edits in sync manually if you change constraint/display logic).
+`RangeSliderSimple` is a dual-handle range control built from two `<input type="range">` elements. Styling follows the **default MDN / Chrome** pattern (blue filled track, grey remainder, white circular thumb with light border/shadow); default fill **#3b82f6** matches typical `RangeSlider` `[range]` bar examples. Hit targets match the painted thumbs. The file is **self-contained** (same core behavior as `RangeSlider`, inlined—keep edits in sync manually if you change constraint/display logic).
 
 Use **`RangeSlider`** when you need custom thumb graphics or a separate range bar element. Use **`RangeSliderSimple`** when native appearance (plus your own CSS overrides) is enough.
 
@@ -50,7 +50,7 @@ On `[wt-rangeslidersimple-element="slider"]` you can override:
 - `--wt-rs-track-fill`, `--wt-rs-track-bg`
 - `--wt-rs-thumb-bg`, `--wt-rs-thumb-border`, `--wt-rs-thumb-shadow`
 
-Injected styling approximates the default **MDN / Chrome** range look (white vertical pill thumb, blue progress, grey track).
+Injected styling approximates the default **MDN / Chrome** range look (white round thumb, blue progress, grey track). Thumbs use `pointer-events: auto` only on the thumb pseudo-elements so stacked inputs do not block each other (same idea as `RangeSlider.js`).
 
 ## Optional elements (inside wrapper)
 

From ea242835e6a8b1ce6eed333f4fc5621637424f9d Mon Sep 17 00:00:00 2001
From: matthewcsimpson <mcsimpson@gmail.com>
Date: Thu, 19 Mar 2026 12:00:07 -0700
Subject: [PATCH 07/15] selection update

---
 Dist/Functional/RangeSliderSimple.js | 107 ++++++++++++++++-----------
 docs/Functional/RangeSliderSimple.md |   4 +-
 2 files changed, 64 insertions(+), 47 deletions(-)

diff --git a/Dist/Functional/RangeSliderSimple.js b/Dist/Functional/RangeSliderSimple.js
index 77d7209..62ab0ef 100644
--- a/Dist/Functional/RangeSliderSimple.js
+++ b/Dist/Functional/RangeSliderSimple.js
@@ -1,6 +1,6 @@
 /*!
  * WebTricks — RangeSliderSimple
- * @version 0.0.7 — pre-release; bump patch (and docs/Functional/RangeSliderSimple.md) on every change to this file.
+ * @version 0.0.8 — pre-release; bump patch (and docs/Functional/RangeSliderSimple.md) on every change to this file.
  * Dual native range inputs (no custom thumb DOM). Self-contained (single script tag).
  * MIT License
  */
@@ -175,16 +175,19 @@ class RangeSliderSimple {
 
         const style = document.createElement('style');
         style.id = 'wt-rangeslidersimple-styles';
-        /* MDN-like range UI (Chrome docs): blue filled track, grey remainder, white pill thumb.
-           --wt-rs-track-fill defaults to #3b82f6 (typical RangeSlider [range] bar in docs). */
+        /* Shared track on ::before so neither input's track paints over the other thumb.
+           Thumbs-only on inputs (Safari/Chrome); size ~24px to match common native macOS range. */
         style.textContent = `
     [${ATTR_PREFIX}-element="slider"] {
         --wt-rs-track-fill: #3b82f6;
         --wt-rs-track-bg: #e5e7eb;
         --wt-rs-thumb-bg: #ffffff;
-        --wt-rs-thumb-border: #cbd5e1;
-        --wt-rs-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+        --wt-rs-thumb-border: #aeb6c2;
+        --wt-rs-thumb-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.18);
+        --wt-rs-range-from: 0%;
+        --wt-rs-range-to: 100%;
         position: relative;
+        isolation: isolate;
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: 1fr;
@@ -194,13 +197,35 @@ class RangeSliderSimple {
         box-sizing: border-box;
     }
 
+    [${ATTR_PREFIX}-element="slider"]::before {
+        content: "";
+        grid-column: 1;
+        grid-row: 1;
+        align-self: center;
+        width: 100%;
+        height: 6px;
+        border-radius: 3px;
+        pointer-events: none;
+        z-index: 0;
+        box-sizing: border-box;
+        background: linear-gradient(
+            to right,
+            var(--wt-rs-track-bg, #e5e7eb) 0%,
+            var(--wt-rs-track-bg, #e5e7eb) var(--wt-rs-range-from, 0%),
+            var(--wt-rs-track-fill, #3b82f6) var(--wt-rs-range-from, 0%),
+            var(--wt-rs-track-fill, #3b82f6) var(--wt-rs-range-to, 100%),
+            var(--wt-rs-track-bg, #e5e7eb) var(--wt-rs-range-to, 100%),
+            var(--wt-rs-track-bg, #e5e7eb) 100%
+        );
+    }
+
     input[type="range"][${ATTR_PREFIX}-element="input-left"],
     input[type="range"][${ATTR_PREFIX}-element="input-right"] {
         --wt-rs-track-fill: #3b82f6;
         --wt-rs-track-bg: #e5e7eb;
         --wt-rs-thumb-bg: #ffffff;
-        --wt-rs-thumb-border: #cbd5e1;
-        --wt-rs-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+        --wt-rs-thumb-border: #aeb6c2;
+        --wt-rs-thumb-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.18);
         grid-column: 1;
         grid-row: 1;
         width: 100%;
@@ -211,31 +236,21 @@ class RangeSliderSimple {
         pointer-events: none;
         accent-color: transparent;
         z-index: 2;
-        height: 1.5rem;
-        min-height: 1.5rem;
+        height: 1.75rem;
+        min-height: 1.75rem;
         background: transparent;
         -webkit-appearance: none !important;
         appearance: none !important;
         -moz-appearance: none !important;
     }
 
-    /* Later sibling paints on top; keep right above left when thumbs overlap. */
-    input[type="range"][${ATTR_PREFIX}-element="input-right"] {
-        z-index: 3;
-    }
-
     input[type="range"][${ATTR_PREFIX}-element="input-left"]::-webkit-slider-runnable-track,
     input[type="range"][${ATTR_PREFIX}-element="input-right"]::-webkit-slider-runnable-track {
         pointer-events: none;
         height: 6px;
         border-radius: 3px;
-        background: linear-gradient(
-            to right,
-            var(--wt-rs-track-fill, #3b82f6) 0%,
-            var(--wt-rs-track-fill, #3b82f6) var(--wt-rs-pct, 0%),
-            var(--wt-rs-track-bg, #e5e7eb) var(--wt-rs-pct, 0%),
-            var(--wt-rs-track-bg, #e5e7eb) 100%
-        );
+        background: transparent;
+        border: none;
     }
 
     input[type="range"][${ATTR_PREFIX}-element="input-left"]::-webkit-slider-thumb,
@@ -244,13 +259,13 @@ class RangeSliderSimple {
         pointer-events: auto;
         position: relative;
         z-index: 1;
-        width: 16px;
-        height: 16px;
-        margin-top: -5px;
+        width: 24px;
+        height: 24px;
+        margin-top: -9px;
         border-radius: 50%;
         background: var(--wt-rs-thumb-bg, #ffffff) !important;
-        border: 1px solid var(--wt-rs-thumb-border, #cbd5e1) !important;
-        box-shadow: var(--wt-rs-thumb-shadow, 0 1px 3px rgba(0, 0, 0, 0.12)) !important;
+        border: 1px solid var(--wt-rs-thumb-border, #aeb6c2) !important;
+        box-shadow: var(--wt-rs-thumb-shadow, 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.18)) !important;
         cursor: pointer;
     }
 
@@ -259,7 +274,7 @@ class RangeSliderSimple {
         pointer-events: none;
         height: 6px;
         border-radius: 3px;
-        background: var(--wt-rs-track-bg, #e5e7eb);
+        background: transparent;
         border: none;
     }
 
@@ -268,19 +283,19 @@ class RangeSliderSimple {
         pointer-events: none;
         height: 6px;
         border-radius: 3px;
-        background: var(--wt-rs-track-fill, #3b82f6);
+        background: transparent;
         border: none;
     }
 
     input[type="range"][${ATTR_PREFIX}-element="input-left"]::-moz-range-thumb,
     input[type="range"][${ATTR_PREFIX}-element="input-right"]::-moz-range-thumb {
         pointer-events: auto;
-        width: 16px;
-        height: 16px;
+        width: 24px;
+        height: 24px;
         border-radius: 50%;
         background: var(--wt-rs-thumb-bg, #ffffff) !important;
-        border: 1px solid var(--wt-rs-thumb-border, #cbd5e1) !important;
-        box-shadow: var(--wt-rs-thumb-shadow, 0 1px 3px rgba(0, 0, 0, 0.12)) !important;
+        border: 1px solid var(--wt-rs-thumb-border, #aeb6c2) !important;
+        box-shadow: var(--wt-rs-thumb-shadow, 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.18)) !important;
         cursor: pointer;
     }
 
@@ -294,18 +309,20 @@ class RangeSliderSimple {
     }
 
     syncTrackFillPercents() {
-        if (!this.inputLeft || !this.inputRight) return;
-        [this.inputLeft, this.inputRight].forEach((input) => {
-            const min = parseInt(input.min, 10);
-            const max = parseInt(input.max, 10);
-            const val = parseInt(input.value, 10);
-            const safeMin = Number.isFinite(min) ? min : 0;
-            const safeMax = Number.isFinite(max) ? max : 100;
-            const safeVal = Number.isFinite(val) ? val : safeMin;
-            const pct =
-                safeMax <= safeMin ? 0 : ((safeVal - safeMin) / (safeMax - safeMin)) * 100;
-            input.style.setProperty('--wt-rs-pct', `${pct}%`);
-        });
+        if (!this.slider || !this.inputLeft || !this.inputRight) return;
+        const min = parseInt(this.inputLeft.min, 10);
+        const max = parseInt(this.inputLeft.max, 10);
+        const safeMin = Number.isFinite(min) ? min : 0;
+        const safeMax = Number.isFinite(max) ? max : 100;
+        const span = safeMax <= safeMin ? 1 : safeMax - safeMin;
+        const leftVal = parseInt(this.inputLeft.value, 10);
+        const rightVal = parseInt(this.inputRight.value, 10);
+        const safeL = Number.isFinite(leftVal) ? leftVal : safeMin;
+        const safeR = Number.isFinite(rightVal) ? rightVal : safeMax;
+        const pctFrom = ((safeL - safeMin) / span) * 100;
+        const pctTo = ((safeR - safeMin) / span) * 100;
+        this.slider.style.setProperty('--wt-rs-range-from', `${pctFrom}%`);
+        this.slider.style.setProperty('--wt-rs-range-to', `${pctTo}%`);
     }
 
     /** WebKit range pseudos resolve theme vars on the input; copy from slider after config. */
@@ -397,7 +414,7 @@ class RangeSliderSimple {
     bringInputToFront(which) {
         if (which === 'left') {
             this.inputLeft.style.zIndex = '10';
-            this.inputRight.style.zIndex = '3';
+            this.inputRight.style.zIndex = '2';
         } else {
             this.inputRight.style.zIndex = '10';
             this.inputLeft.style.zIndex = '2';
diff --git a/docs/Functional/RangeSliderSimple.md b/docs/Functional/RangeSliderSimple.md
index 7992990..69899a5 100644
--- a/docs/Functional/RangeSliderSimple.md
+++ b/docs/Functional/RangeSliderSimple.md
@@ -2,7 +2,7 @@
 
 ## Version
 
-Current version: **0.0.7** (pre-release — see banner in `Dist/Functional/RangeSliderSimple.js`; bump patch and this line when the script changes).
+Current version: **0.0.8** (pre-release — see banner in `Dist/Functional/RangeSliderSimple.js`; bump patch and this line when the script changes).
 
 ## Description
 
@@ -50,7 +50,7 @@ On `[wt-rangeslidersimple-element="slider"]` you can override:
 - `--wt-rs-track-fill`, `--wt-rs-track-bg`
 - `--wt-rs-thumb-bg`, `--wt-rs-thumb-border`, `--wt-rs-thumb-shadow`
 
-Injected styling approximates the default **MDN / Chrome** range look (white round thumb, blue progress, grey track). Thumbs use `pointer-events: auto` only on the thumb pseudo-elements so stacked inputs do not block each other (same idea as `RangeSlider.js`).
+Injected styling approximates the default **MDN / Safari–Chrome** range look: one **shared** track is drawn on `[wt-rangeslidersimple-element="slider"]::before` (blue only **between** the two values) so neither native track paints over the other thumb. Both inputs use **transparent** tracks and ~**24px** round thumbs. Thumbs use `pointer-events: auto` only on the thumb pseudo-elements. When the two handles overlap, the last-pressed input is raised with `z-index` so one thumb remains grabbable.
 
 ## Optional elements (inside wrapper)
 

From 2d06c61e784477504dda916ada4e6fa115b98cc9 Mon Sep 17 00:00:00 2001
From: matthewcsimpson <mcsimpson@gmail.com>
Date: Thu, 19 Mar 2026 12:03:50 -0700
Subject: [PATCH 08/15] track styling

---
 Dist/Functional/RangeSliderSimple.js | 16 ++++++++--------
 docs/Functional/RangeSlider.md       |  2 +-
 docs/Functional/RangeSliderSimple.md |  6 +++---
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/Dist/Functional/RangeSliderSimple.js b/Dist/Functional/RangeSliderSimple.js
index 62ab0ef..584c2a3 100644
--- a/Dist/Functional/RangeSliderSimple.js
+++ b/Dist/Functional/RangeSliderSimple.js
@@ -1,6 +1,6 @@
 /*!
  * WebTricks — RangeSliderSimple
- * @version 0.0.8 — pre-release; bump patch (and docs/Functional/RangeSliderSimple.md) on every change to this file.
+ * @version 0.0.9 — pre-release; bump patch (and docs/Functional/RangeSliderSimple.md) on every change to this file.
  * Dual native range inputs (no custom thumb DOM). Self-contained (single script tag).
  * MIT License
  */
@@ -176,11 +176,11 @@ class RangeSliderSimple {
         const style = document.createElement('style');
         style.id = 'wt-rangeslidersimple-styles';
         /* Shared track on ::before so neither input's track paints over the other thumb.
-           Thumbs-only on inputs (Safari/Chrome); size ~24px to match common native macOS range. */
+           Default unfilled track #111; override wt-rangeslidersimple-trackbg or --wt-rs-track-bg. */
         style.textContent = `
     [${ATTR_PREFIX}-element="slider"] {
         --wt-rs-track-fill: #3b82f6;
-        --wt-rs-track-bg: #e5e7eb;
+        --wt-rs-track-bg: #111;
         --wt-rs-thumb-bg: #ffffff;
         --wt-rs-thumb-border: #aeb6c2;
         --wt-rs-thumb-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.18);
@@ -210,19 +210,19 @@ class RangeSliderSimple {
         box-sizing: border-box;
         background: linear-gradient(
             to right,
-            var(--wt-rs-track-bg, #e5e7eb) 0%,
-            var(--wt-rs-track-bg, #e5e7eb) var(--wt-rs-range-from, 0%),
+            var(--wt-rs-track-bg, #111) 0%,
+            var(--wt-rs-track-bg, #111) var(--wt-rs-range-from, 0%),
             var(--wt-rs-track-fill, #3b82f6) var(--wt-rs-range-from, 0%),
             var(--wt-rs-track-fill, #3b82f6) var(--wt-rs-range-to, 100%),
-            var(--wt-rs-track-bg, #e5e7eb) var(--wt-rs-range-to, 100%),
-            var(--wt-rs-track-bg, #e5e7eb) 100%
+            var(--wt-rs-track-bg, #111) var(--wt-rs-range-to, 100%),
+            var(--wt-rs-track-bg, #111) 100%
         );
     }
 
     input[type="range"][${ATTR_PREFIX}-element="input-left"],
     input[type="range"][${ATTR_PREFIX}-element="input-right"] {
         --wt-rs-track-fill: #3b82f6;
-        --wt-rs-track-bg: #e5e7eb;
+        --wt-rs-track-bg: #111;
         --wt-rs-thumb-bg: #ffffff;
         --wt-rs-thumb-border: #aeb6c2;
         --wt-rs-thumb-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.18);
diff --git a/docs/Functional/RangeSlider.md b/docs/Functional/RangeSlider.md
index f1ebb7a..56f2c5b 100644
--- a/docs/Functional/RangeSlider.md
+++ b/docs/Functional/RangeSlider.md
@@ -50,7 +50,7 @@ Self-contained: **one** script tag. Use [jsDelivr](https://www.jsdelivr.com/) (n
 - `wt-rangeslider-max="100"` - Maximum value (default: 100)
 - `wt-rangeslider-steps="1"` - Step size (default: 1)
 
-Style the `[wt-rangeslider-element="range"]` bar in your CSS; examples often use **#3b82f6** for the fill. [RangeSliderSimple](./RangeSliderSimple.md) defaults its track fill to the same for visual parity.
+Style the `[wt-rangeslider-element="range"]` bar in your CSS; examples often use **#3b82f6** for the fill. [RangeSliderSimple](./RangeSliderSimple.md) uses the same default fill; its unfilled track defaults to **#111** (`wt-rangeslidersimple-trackbg` to change).
 
 ### Optional Elements
 
diff --git a/docs/Functional/RangeSliderSimple.md b/docs/Functional/RangeSliderSimple.md
index 69899a5..0de8d4e 100644
--- a/docs/Functional/RangeSliderSimple.md
+++ b/docs/Functional/RangeSliderSimple.md
@@ -2,11 +2,11 @@
 
 ## Version
 
-Current version: **0.0.8** (pre-release — see banner in `Dist/Functional/RangeSliderSimple.js`; bump patch and this line when the script changes).
+Current version: **0.0.9** (pre-release — see banner in `Dist/Functional/RangeSliderSimple.js`; bump patch and this line when the script changes).
 
 ## Description
 
-`RangeSliderSimple` is a dual-handle range control built from two `<input type="range">` elements. Styling follows the **default MDN / Chrome** pattern (blue filled track, grey remainder, white circular thumb with light border/shadow); default fill **#3b82f6** matches typical `RangeSlider` `[range]` bar examples. Hit targets match the painted thumbs. The file is **self-contained** (same core behavior as `RangeSlider`, inlined—keep edits in sync manually if you change constraint/display logic).
+`RangeSliderSimple` is a dual-handle range control built from two `<input type="range">` elements. The shared track uses default fill **#3b82f6** and unfilled background **#111**; override the latter with `wt-rangeslidersimple-trackbg` or CSS `--wt-rs-track-bg`. White circular thumbs with light border/shadow. Hit targets match the painted thumbs. The file is **self-contained** (same core behavior as `RangeSlider`, inlined—keep edits in sync manually if you change constraint/display logic).
 
 Use **`RangeSlider`** when you need custom thumb graphics or a separate range bar element. Use **`RangeSliderSimple`** when native appearance (plus your own CSS overrides) is enough.
 
@@ -41,7 +41,7 @@ Same semantics as `RangeSlider`, with the `wt-rangeslidersimple-` prefix:
 - `wt-rangeslidersimple-mindifference`
 - `wt-rangeslidersimple-formatnumber`, `wt-rangeslidersimple-rightsuffix`, `wt-rangeslidersimple-defaultsuffix`
 - `wt-rangeslidersimple-trackfill` — optional CSS color for the filled portion of the track (default **#3b82f6**, aligned with common `RangeSlider` `[range]` bar examples)
-- `wt-rangeslidersimple-trackbg` — optional unfilled track color (default **#e5e7eb**)
+- `wt-rangeslidersimple-trackbg` — unfilled track / “rail” color (default **#111**; e.g. `#e5e7eb` for a light UI)
 
 ## Theming (CSS variables)
 

From 2dc4f130b44ad9cf8bd06f8e9077c1a1ec648ab4 Mon Sep 17 00:00:00 2001
From: matthewcsimpson <mcsimpson@gmail.com>
Date: Thu, 19 Mar 2026 12:06:21 -0700
Subject: [PATCH 09/15] track styling

---
 Dist/Functional/RangeSliderSimple.js |  9 ++++++---
 docs/Functional/RangeSlider.md       |  2 +-
 docs/Functional/RangeSliderSimple.md | 11 ++++++-----
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/Dist/Functional/RangeSliderSimple.js b/Dist/Functional/RangeSliderSimple.js
index 584c2a3..8f25c2a 100644
--- a/Dist/Functional/RangeSliderSimple.js
+++ b/Dist/Functional/RangeSliderSimple.js
@@ -1,6 +1,6 @@
 /*!
  * WebTricks — RangeSliderSimple
- * @version 0.0.9 — pre-release; bump patch (and docs/Functional/RangeSliderSimple.md) on every change to this file.
+ * @version 0.0.10 — pre-release; bump patch (and docs/Functional/RangeSliderSimple.md) on every change to this file.
  * Dual native range inputs (no custom thumb DOM). Self-contained (single script tag).
  * MIT License
  */
@@ -175,8 +175,7 @@ class RangeSliderSimple {
 
         const style = document.createElement('style');
         style.id = 'wt-rangeslidersimple-styles';
-        /* Shared track on ::before so neither input's track paints over the other thumb.
-           Default unfilled track #111; override wt-rangeslidersimple-trackbg or --wt-rs-track-bg. */
+        /* Shared track on ::before. Default: solid rail (--wt-rs-track-bg). Optional rangehighlight paints fill between thumbs. */
         style.textContent = `
     [${ATTR_PREFIX}-element="slider"] {
         --wt-rs-track-fill: #3b82f6;
@@ -208,6 +207,10 @@ class RangeSliderSimple {
         pointer-events: none;
         z-index: 0;
         box-sizing: border-box;
+        background: var(--wt-rs-track-bg, #111);
+    }
+
+    [${ATTR_PREFIX}-element="slider"][${ATTR_PREFIX}-rangehighlight="true"]::before {
         background: linear-gradient(
             to right,
             var(--wt-rs-track-bg, #111) 0%,
diff --git a/docs/Functional/RangeSlider.md b/docs/Functional/RangeSlider.md
index 56f2c5b..be42bf2 100644
--- a/docs/Functional/RangeSlider.md
+++ b/docs/Functional/RangeSlider.md
@@ -50,7 +50,7 @@ Self-contained: **one** script tag. Use [jsDelivr](https://www.jsdelivr.com/) (n
 - `wt-rangeslider-max="100"` - Maximum value (default: 100)
 - `wt-rangeslider-steps="1"` - Step size (default: 1)
 
-Style the `[wt-rangeslider-element="range"]` bar in your CSS; examples often use **#3b82f6** for the fill. [RangeSliderSimple](./RangeSliderSimple.md) uses the same default fill; its unfilled track defaults to **#111** (`wt-rangeslidersimple-trackbg` to change).
+Style the `[wt-rangeslider-element="range"]` bar in your CSS; examples often use **#3b82f6** for the fill. [RangeSliderSimple](./RangeSliderSimple.md) defaults to a solid **#111** rail; optional `wt-rangeslidersimple-rangehighlight="true"` adds **#3b82f6** between the handles (`wt-rangeslidersimple-trackfill` / `trackbg` to tune).
 
 ### Optional Elements
 
diff --git a/docs/Functional/RangeSliderSimple.md b/docs/Functional/RangeSliderSimple.md
index 0de8d4e..20f2f74 100644
--- a/docs/Functional/RangeSliderSimple.md
+++ b/docs/Functional/RangeSliderSimple.md
@@ -2,11 +2,11 @@
 
 ## Version
 
-Current version: **0.0.9** (pre-release — see banner in `Dist/Functional/RangeSliderSimple.js`; bump patch and this line when the script changes).
+Current version: **0.0.10** (pre-release — see banner in `Dist/Functional/RangeSliderSimple.js`; bump patch and this line when the script changes).
 
 ## Description
 
-`RangeSliderSimple` is a dual-handle range control built from two `<input type="range">` elements. The shared track uses default fill **#3b82f6** and unfilled background **#111**; override the latter with `wt-rangeslidersimple-trackbg` or CSS `--wt-rs-track-bg`. White circular thumbs with light border/shadow. Hit targets match the painted thumbs. The file is **self-contained** (same core behavior as `RangeSlider`, inlined—keep edits in sync manually if you change constraint/display logic).
+`RangeSliderSimple` is a dual-handle range control built from two `<input type="range">` elements. The shared track is a **solid rail** using **#111** by default (override with `wt-rangeslidersimple-trackbg` or `--wt-rs-track-bg`). To paint **#3b82f6** (or `trackfill`) **between** the two handles, add `wt-rangeslidersimple-rangehighlight="true"`. White circular thumbs with light border/shadow. The file is **self-contained** (same core behavior as `RangeSlider`, inlined—keep edits in sync manually if you change constraint/display logic).
 
 Use **`RangeSlider`** when you need custom thumb graphics or a separate range bar element. Use **`RangeSliderSimple`** when native appearance (plus your own CSS overrides) is enough.
 
@@ -40,8 +40,9 @@ Same semantics as `RangeSlider`, with the `wt-rangeslidersimple-` prefix:
 - `wt-rangeslidersimple-min`, `wt-rangeslidersimple-max`, `wt-rangeslidersimple-steps`
 - `wt-rangeslidersimple-mindifference`
 - `wt-rangeslidersimple-formatnumber`, `wt-rangeslidersimple-rightsuffix`, `wt-rangeslidersimple-defaultsuffix`
-- `wt-rangeslidersimple-trackfill` — optional CSS color for the filled portion of the track (default **#3b82f6**, aligned with common `RangeSlider` `[range]` bar examples)
-- `wt-rangeslidersimple-trackbg` — unfilled track / “rail” color (default **#111**; e.g. `#e5e7eb` for a light UI)
+- `wt-rangeslidersimple-trackbg` — rail color for the full shared track (default **#111**; e.g. `#e5e7eb` for a light UI)
+- `wt-rangeslidersimple-rangehighlight="true"` — when set, the segment **between** the two thumbs uses the fill color (below); when omitted, the rail is solid `trackbg` everywhere
+- `wt-rangeslidersimple-trackfill` — fill color for that between-handle segment when `rangehighlight` is enabled (default **#3b82f6**)
 
 ## Theming (CSS variables)
 
@@ -50,7 +51,7 @@ On `[wt-rangeslidersimple-element="slider"]` you can override:
 - `--wt-rs-track-fill`, `--wt-rs-track-bg`
 - `--wt-rs-thumb-bg`, `--wt-rs-thumb-border`, `--wt-rs-thumb-shadow`
 
-Injected styling approximates the default **MDN / Safari–Chrome** range look: one **shared** track is drawn on `[wt-rangeslidersimple-element="slider"]::before` (blue only **between** the two values) so neither native track paints over the other thumb. Both inputs use **transparent** tracks and ~**24px** round thumbs. Thumbs use `pointer-events: auto` only on the thumb pseudo-elements. When the two handles overlap, the last-pressed input is raised with `z-index` so one thumb remains grabbable.
+Injected styling: one **shared** track on `[wt-rangeslidersimple-element="slider"]::before` (solid rail by default); native tracks stay **transparent** so thumbs stack cleanly. ~**24px** round thumbs; `pointer-events: auto` only on thumb pseudos. When the two handles overlap, the last-pressed input gets a higher `z-index`.
 
 ## Optional elements (inside wrapper)
 

From d798390de3dfa64bae4aca9503a681f9577adcee Mon Sep 17 00:00:00 2001
From: matthewcsimpson <mcsimpson@gmail.com>
Date: Thu, 19 Mar 2026 12:10:30 -0700
Subject: [PATCH 10/15] release candidate

---
 Dist/Functional/RangeSliderSimple.js |  2 +-
 docs/Functional/RangeSliderSimple.md | 65 +++++++++++++++++-----------
 2 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/Dist/Functional/RangeSliderSimple.js b/Dist/Functional/RangeSliderSimple.js
index 8f25c2a..b02ddb4 100644
--- a/Dist/Functional/RangeSliderSimple.js
+++ b/Dist/Functional/RangeSliderSimple.js
@@ -1,6 +1,6 @@
 /*!
  * WebTricks — RangeSliderSimple
- * @version 0.0.10 — pre-release; bump patch (and docs/Functional/RangeSliderSimple.md) on every change to this file.
+ * @version 1.0.0 — bump semver and docs/Functional/RangeSliderSimple.md when releasing.
  * Dual native range inputs (no custom thumb DOM). Self-contained (single script tag).
  * MIT License
  */
diff --git a/docs/Functional/RangeSliderSimple.md b/docs/Functional/RangeSliderSimple.md
index 20f2f74..532a44f 100644
--- a/docs/Functional/RangeSliderSimple.md
+++ b/docs/Functional/RangeSliderSimple.md
@@ -2,21 +2,24 @@
 
 ## Version
 
-Current version: **0.0.10** (pre-release — see banner in `Dist/Functional/RangeSliderSimple.js`; bump patch and this line when the script changes).
+Current version: **1.0.0** (kept in sync with the `@version` banner in `Dist/Functional/RangeSliderSimple.js`).
 
 ## Description
 
-`RangeSliderSimple` is a dual-handle range control built from two `<input type="range">` elements. The shared track is a **solid rail** using **#111** by default (override with `wt-rangeslidersimple-trackbg` or `--wt-rs-track-bg`). To paint **#3b82f6** (or `trackfill`) **between** the two handles, add `wt-rangeslidersimple-rangehighlight="true"`. White circular thumbs with light border/shadow. The file is **self-contained** (same core behavior as `RangeSlider`, inlined—keep edits in sync manually if you change constraint/display logic).
+`RangeSliderSimple` is a **dual-handle** range control built from two stacked `<input type="range">` elements. The script injects styling so both native thumbs stay visible and grabbable (shared rail on `::before`, transparent per-input tracks, thumb-only pointer events).
 
-Use **`RangeSlider`** when you need custom thumb graphics or a separate range bar element. Use **`RangeSliderSimple`** when native appearance (plus your own CSS overrides) is enough.
+- **Rail:** solid **#111** by default (`wt-rangeslidersimple-trackbg` or `--wt-rs-track-bg` to change).
+- **Between-handle accent:** optional **`wt-rangeslidersimple-rangehighlight="true"`**; fill color defaults to **#3b82f6** (`wt-rangeslidersimple-trackfill`).
+- **Thumbs:** ~24px circles, white with border and shadow (tunable via CSS variables).
+
+The script is **self-contained** (single file, one `<script>` tag).
 
 ## Functionality
 
-- Dual native range inputs
-- Same optional form/display wiring pattern as `RangeSlider` (with `wt-rangeslidersimple-*` names)
-- Configurable min, max, step, minimum gap between handles
-- Optional number formatting and display suffixes
-- `pointerdown` raises the active track so overlapping handles remain grabbable
+- Two native range inputs with constrained values (left ≤ right, minimum gap configurable)
+- Optional **from/to** text inputs and **from/to** display nodes kept in sync
+- Optional **thousand separators** and **suffixes** on the end display
+- **`pointerdown`** raises the active input in the stack when handles overlap so both thumbs stay draggable
 
 ## Installation
 
@@ -29,34 +32,44 @@ One script tag. Use [jsDelivr](https://www.jsdelivr.com/) (not raw GitHub URLs)
 ## Required attributes
 
 - `wt-rangeslidersimple-element="slider-wrapper"` — outer container
-- `wt-rangeslidersimple-element="slider"` — track container (holds both inputs)
+- `wt-rangeslidersimple-element="slider"` — track container (holds both range inputs)
 - `wt-rangeslidersimple-element="input-left"` — left `<input type="range">`
 - `wt-rangeslidersimple-element="input-right"` — right `<input type="range">`
 
 ## Optional attributes (on the slider element)
 
-Same semantics as `RangeSlider`, with the `wt-rangeslidersimple-` prefix:
+### Value range and stepping
+
+- `wt-rangeslidersimple-min` — minimum value (number; default **0**)
+- `wt-rangeslidersimple-max` — maximum value (number; default **100**)
+- `wt-rangeslidersimple-steps` — `step` on both range inputs (number; default **1**). Use any **positive** step the browser accepts for `<input type="range">` (integers or decimals, e.g. `0.1`). Invalid number strings cause initialization to throw.
+- `wt-rangeslidersimple-mindifference` — minimum difference between the two values, in the same units as min/max (default: same as **steps**)
+
+### Display and form text
+
+- `wt-rangeslidersimple-formatnumber="true"` — format numeric displays with thousand separators (e.g. `1,000`)
+- `wt-rangeslidersimple-rightsuffix` — appended to the **end** display when the end value is at **max** (e.g. `+` for “100+”)
+- `wt-rangeslidersimple-defaultsuffix` — appended to the **end** display when `rightsuffix` does not apply (when the value is below max, or when `rightsuffix` is unset)
+
+### Track appearance
 
-- `wt-rangeslidersimple-min`, `wt-rangeslidersimple-max`, `wt-rangeslidersimple-steps`
-- `wt-rangeslidersimple-mindifference`
-- `wt-rangeslidersimple-formatnumber`, `wt-rangeslidersimple-rightsuffix`, `wt-rangeslidersimple-defaultsuffix`
-- `wt-rangeslidersimple-trackbg` — rail color for the full shared track (default **#111**; e.g. `#e5e7eb` for a light UI)
-- `wt-rangeslidersimple-rangehighlight="true"` — when set, the segment **between** the two thumbs uses the fill color (below); when omitted, the rail is solid `trackbg` everywhere
-- `wt-rangeslidersimple-trackfill` — fill color for that between-handle segment when `rangehighlight` is enabled (default **#3b82f6**)
+- `wt-rangeslidersimple-trackbg` — full rail color (default **#111**)
+- `wt-rangeslidersimple-rangehighlight="true"` — paint the segment **between** the two thumbs with the fill color; omit for a solid rail everywhere
+- `wt-rangeslidersimple-trackfill` — that between-handle color when `rangehighlight` is enabled (default **#3b82f6**)
 
 ## Theming (CSS variables)
 
-On `[wt-rangeslidersimple-element="slider"]` you can override:
+On `[wt-rangeslidersimple-element="slider"]` you can set:
 
 - `--wt-rs-track-fill`, `--wt-rs-track-bg`
 - `--wt-rs-thumb-bg`, `--wt-rs-thumb-border`, `--wt-rs-thumb-shadow`
 
-Injected styling: one **shared** track on `[wt-rangeslidersimple-element="slider"]::before` (solid rail by default); native tracks stay **transparent** so thumbs stack cleanly. ~**24px** round thumbs; `pointer-events: auto` only on thumb pseudos. When the two handles overlap, the last-pressed input gets a higher `z-index`.
+Injected rules draw the shared rail on `::before`, keep native tracks transparent, and limit `pointer-events` to thumbs so stacked inputs do not block each other. When handles overlap, the last-pressed range input gets a higher `z-index`.
 
-## Optional elements (inside wrapper)
+## Optional elements (inside the wrapper)
 
-- `[wt-rangeslidersimple-range="from"]`, `[wt-rangeslidersimple-range="to"]` — text inputs
-- `[wt-rangeslidersimple-display="from"]`, `[wt-rangeslidersimple-display="to"]` — display nodes
+- `[wt-rangeslidersimple-range="from"]`, `[wt-rangeslidersimple-range="to"]` — typically `<input type="text">`; values stay in sync with the range inputs
+- `[wt-rangeslidersimple-display="from"]`, `[wt-rangeslidersimple-display="to"]` — elements whose text content is updated to show the current range
 
 ## Example
 
@@ -78,20 +91,20 @@ Injected styling: one **shared** track on `[wt-rangeslidersimple-element="slider
 </div>
 ```
 
-## Using both slider types on one page
+## Coexisting with other embeds
 
-You may load **`RangeSlider.js`** and **`RangeSliderSimple.js`** on the same page. Do **not** mix attribute families on the same component (`wt-rangeslider-*` vs `wt-rangeslidersimple-*`).
+You may load **multiple** WebTricks scripts on one page. Do **not** put `wt-rangeslider-*` and `wt-rangeslidersimple-*` attributes on the **same** component—they are different attribute families for different modules.
 
 ## CMSFilter
 
-Filter-driven min/max for collection ranges applies to **`wt-rangeslider-*`** only unless `CMSFilter` is extended for `wt-rangeslidersimple-*`.
+Filter-driven min/max for CMS collection ranges only applies to sliders that use the `wt-rangeslider-*` attribute set unless `CMSFilter` is extended to recognize `wt-rangeslidersimple-*`.
 
 ## Public API (instance)
 
-After init, instances are available on `window.webtricks` as `{ RangeSliderSimple: instance }`.
+After init, instances are pushed to `window.webtricks` as `{ RangeSliderSimple: instance }`.
 
 - `setFrom(value)`, `setTo(value)`, `setRange(from, to)`, `reset()`
 
 ## CodePen / global CSS
 
-The script injects complete **WebKit / Firefox** range pseudo-element styling so host resets (e.g. CodePen `input { appearance: none }`) do not leave unstyled thumbs. It also moves the injected `<style>` to the end of `<head>` (and on `setTimeout(0)`). Avoid duplicating conflicting `input[type=range]` rules in the Pen’s CSS panel; purge jsDelivr or pin a commit after updates.
+The script injects **WebKit / Firefox** range pseudo-element rules so host resets (e.g. `input { appearance: none }`) do not leave broken thumbs. It re-appends its `<style id="wt-rangeslidersimple-styles">` so it wins in cascade order where possible. Avoid conflicting global `input[type=range]` rules; after CDN updates, hard-refresh or bump a cache-busting query on the script URL.

From 40fc69b83170da142b9c1789e38997b0f6cd25d9 Mon Sep 17 00:00:00 2001
From: matthewcsimpson <mcsimpson@gmail.com>
Date: Thu, 19 Mar 2026 12:20:31 -0700
Subject: [PATCH 11/15] testing update

---
 .github/workflows/tests.yml   | 26 +++++++++++++++++++++++---
 Dist/WebflowOnly/CMSFilter.js |  3 ++-
 Dist/WebflowOnly/CMSSelect.js |  6 +++---
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index b09bad6..006bbcc 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -32,14 +32,34 @@ jobs:
         run: npx jest --runInBand --coverage --coverageReporters=text-summary --coverageReporters=lcov --coverageReporters=json-summary
 
       - name: Upload coverage artifact
-        if: always()
+        if: always() && hashFiles('coverage/coverage-summary.json') != ''
         uses: actions/upload-artifact@v4
         with:
           name: coverage
           path: coverage/**
 
       - name: Add coverage summary to job summary
-        if: always()
+        if: always() && hashFiles('coverage/coverage-summary.json') != ''
         shell: bash
         run: |
-          node -e "const fs=require('fs');const p='coverage/coverage-summary.json';if(fs.existsSync(p)){const s=JSON.parse(fs.readFileSync(p,'utf8'));const t=(o)=>o.total;const c=t(s);const md=\`## Coverage summary\\n\\n- Statements: \${c.statements.pct}% (\${c.statements.covered}/\${c.statements.total})\\n- Branches: \${c.branches.pct}% (\${c.branches.covered}/\${c.branches.total})\\n- Functions: \${c.functions.pct}% (\${c.functions.covered}/\${c.functions.total})\\n- Lines: \${c.lines.pct}% (\${c.lines.covered}/\${c.lines.total})\\n\`;fs.appendFileSync(process.env.GITHUB_STEP_SUMMARY, md);}else{console.log('coverage-summary.json not found')}}"
+          node <<'NODE'
+          const fs = require('fs');
+          const p = 'coverage/coverage-summary.json';
+          const out = process.env.GITHUB_STEP_SUMMARY;
+          if (!out) {
+            console.log('GITHUB_STEP_SUMMARY not set; skipping');
+            process.exit(0);
+          }
+          const s = JSON.parse(fs.readFileSync(p, 'utf8'));
+          const c = s.total;
+          const lines = [
+            '## Coverage summary',
+            '',
+            `- Statements: ${c.statements.pct}% (${c.statements.covered}/${c.statements.total})`,
+            `- Branches: ${c.branches.pct}% (${c.branches.covered}/${c.branches.total})`,
+            `- Functions: ${c.functions.pct}% (${c.functions.covered}/${c.functions.total})`,
+            `- Lines: ${c.lines.pct}% (${c.lines.covered}/${c.lines.total})`,
+            '',
+          ];
+          fs.appendFileSync(out, lines.join('\n'));
+          NODE
diff --git a/Dist/WebflowOnly/CMSFilter.js b/Dist/WebflowOnly/CMSFilter.js
index 03f0f1f..fcb261e 100644
--- a/Dist/WebflowOnly/CMSFilter.js
+++ b/Dist/WebflowOnly/CMSFilter.js
@@ -652,7 +652,8 @@ class CMSFilter {
 
   ShowResultCount() {
     if (!this.resultCount) return;
-    this.resultCount.innerText = this.GetResults();
+    // textContent so updates are visible to tests and matches non-layout engines (e.g. jsdom)
+    this.resultCount.textContent = String(this.GetResults());
   }
 
   GetFilters() {
diff --git a/Dist/WebflowOnly/CMSSelect.js b/Dist/WebflowOnly/CMSSelect.js
index 20b10b3..8f0d9b7 100644
--- a/Dist/WebflowOnly/CMSSelect.js
+++ b/Dist/WebflowOnly/CMSSelect.js
@@ -22,9 +22,9 @@ class CMSSelect {
         try {
             this.options.forEach(opt => {
                 const value = opt.getAttribute('wt-cmsselect-value');
-                const text = opt.innerText;
-                
-                if (text && text.trim() !== "") {
+                const text = (opt.textContent || opt.innerText || '').trim();
+
+                if (text !== '') {
                     const option = new Option(text, value || text);
                     this.selectElement.add(option);
                 }

From c8aff02c6e04945a45d7d5aa1c551124aacc69c8 Mon Sep 17 00:00:00 2001
From: matthewcsimpson <mcsimpson@gmail.com>
Date: Fri, 20 Mar 2026 12:50:17 -0700
Subject: [PATCH 12/15] pr feedback, float vs in

---
 Dist/Functional/RangeSlider.js       | 14 ++++----
 Dist/Functional/RangeSliderSimple.js | 16 ++++-----
 __tests__/RangeSlider.test.js        | 26 ++++++++++++++
 __tests__/RangeSliderSimple.test.js  | 53 ++++++++++++++++++++++++++++
 4 files changed, 94 insertions(+), 15 deletions(-)

diff --git a/Dist/Functional/RangeSlider.js b/Dist/Functional/RangeSlider.js
index 664e8e6..ee1532e 100644
--- a/Dist/Functional/RangeSlider.js
+++ b/Dist/Functional/RangeSlider.js
@@ -51,15 +51,15 @@ var __WT_RANGE_SLIDER_CORE = (function () {
 
     function constrainLeftValue(rawValue, rightValueStr, minDifference) {
         return Math.min(
-            parseInt(rawValue, 10),
-            parseInt(rightValueStr, 10) - minDifference,
+            parseFloat(rawValue),
+            parseFloat(rightValueStr) - minDifference,
         );
     }
 
     function constrainRightValue(rawValue, leftValueStr, minDifference) {
         return Math.max(
-            parseInt(rawValue, 10),
-            parseInt(leftValueStr, 10) + minDifference,
+            parseFloat(rawValue),
+            parseFloat(leftValueStr) + minDifference,
         );
     }
 
@@ -440,9 +440,9 @@ class RangeSlider {
     }
 
     updateThumbPosition(input, thumb, range, side) {
-        const min = parseInt(input.min, 10);
-        const max = parseInt(input.max, 10);
-        const current = parseInt(input.value, 10);
+        const min = parseFloat(input.min);
+        const max = parseFloat(input.max);
+        const current = parseFloat(input.value);
         const percent = ((current - min) / (max - min)) * 100;
 
         if (side === 'left') {
diff --git a/Dist/Functional/RangeSliderSimple.js b/Dist/Functional/RangeSliderSimple.js
index b02ddb4..05dc40b 100644
--- a/Dist/Functional/RangeSliderSimple.js
+++ b/Dist/Functional/RangeSliderSimple.js
@@ -47,15 +47,15 @@ var __WT_RANGE_SLIDER_SIMPLE_CORE = (function () {
 
     function constrainLeftValue(rawValue, rightValueStr, minDifference) {
         return Math.min(
-            parseInt(rawValue, 10),
-            parseInt(rightValueStr, 10) - minDifference,
+            parseFloat(rawValue),
+            parseFloat(rightValueStr) - minDifference,
         );
     }
 
     function constrainRightValue(rawValue, leftValueStr, minDifference) {
         return Math.max(
-            parseInt(rawValue, 10),
-            parseInt(leftValueStr, 10) + minDifference,
+            parseFloat(rawValue),
+            parseFloat(leftValueStr) + minDifference,
         );
     }
 
@@ -313,13 +313,13 @@ class RangeSliderSimple {
 
     syncTrackFillPercents() {
         if (!this.slider || !this.inputLeft || !this.inputRight) return;
-        const min = parseInt(this.inputLeft.min, 10);
-        const max = parseInt(this.inputLeft.max, 10);
+        const min = parseFloat(this.inputLeft.min);
+        const max = parseFloat(this.inputLeft.max);
         const safeMin = Number.isFinite(min) ? min : 0;
         const safeMax = Number.isFinite(max) ? max : 100;
         const span = safeMax <= safeMin ? 1 : safeMax - safeMin;
-        const leftVal = parseInt(this.inputLeft.value, 10);
-        const rightVal = parseInt(this.inputRight.value, 10);
+        const leftVal = parseFloat(this.inputLeft.value);
+        const rightVal = parseFloat(this.inputRight.value);
         const safeL = Number.isFinite(leftVal) ? leftVal : safeMin;
         const safeR = Number.isFinite(rightVal) ? rightVal : safeMax;
         const pctFrom = ((safeL - safeMin) / span) * 100;
diff --git a/__tests__/RangeSlider.test.js b/__tests__/RangeSlider.test.js
index 9f0f9f4..14f696d 100644
--- a/__tests__/RangeSlider.test.js
+++ b/__tests__/RangeSlider.test.js
@@ -47,4 +47,30 @@ describe('RangeSlider', () => {
         InitializeRangeSlider();
         expect(window.webtricks.some((e) => e.RangeSlider)).toBe(true);
     });
+
+    test('decimal mindifference constrains without parseInt truncation', () => {
+        document.body.innerHTML = `
+      <div wt-rangeslider-element="slider-wrapper">
+        <div wt-rangeslider-element="slider"
+             wt-rangeslider-min="0"
+             wt-rangeslider-max="10"
+             wt-rangeslider-steps="0.1"
+             wt-rangeslider-mindifference="0.3">
+          <div wt-rangeslider-element="range"></div>
+          <div wt-rangeslider-element="thumb-left"></div>
+          <div wt-rangeslider-element="thumb-right"></div>
+          <input type="range" wt-rangeslider-element="input-left" />
+          <input type="range" wt-rangeslider-element="input-right" />
+        </div>
+      </div>
+    `;
+        const wrapper = document.querySelector(
+            '[wt-rangeslider-element="slider-wrapper"]',
+        );
+        const rs = new RangeSlider(wrapper);
+        rs.setTo('5');
+        rs.setFrom('4.9');
+        const left = wrapper.querySelector('[wt-rangeslider-element="input-left"]');
+        expect(left.value).toBe('4.7');
+    });
 });
diff --git a/__tests__/RangeSliderSimple.test.js b/__tests__/RangeSliderSimple.test.js
index 94d4e28..e36852d 100644
--- a/__tests__/RangeSliderSimple.test.js
+++ b/__tests__/RangeSliderSimple.test.js
@@ -55,4 +55,57 @@ describe('RangeSliderSimple', () => {
         InitializeRangeSliderSimple();
         expect(window.webtricks.some((e) => e.RangeSliderSimple)).toBe(true);
     });
+
+    test('integer step and minDifference still constrain (parseFloat handles whole numbers)', () => {
+        mountSlider();
+        const wrapper = document.querySelector(
+            '[wt-rangeslidersimple-element="slider-wrapper"]',
+        );
+        const instance = new RangeSliderSimple(wrapper);
+        const left = wrapper.querySelector(
+            '[wt-rangeslidersimple-element="input-left"]',
+        );
+        const right = wrapper.querySelector(
+            '[wt-rangeslidersimple-element="input-right"]',
+        );
+
+        instance.setTo('20');
+        instance.setFrom('25');
+
+        // min(25, 20 - 1) = 19 with default mindifference === steps === 1
+        expect(left.value).toBe('19');
+        expect(right.value).toBe('20');
+    });
+
+    test('decimal minDifference constrains with floats, not parseInt truncation', () => {
+        document.body.innerHTML = `
+      <div wt-rangeslidersimple-element="slider-wrapper">
+        <div wt-rangeslidersimple-element="slider"
+             wt-rangeslidersimple-min="0"
+             wt-rangeslidersimple-max="10"
+             wt-rangeslidersimple-steps="0.1"
+             wt-rangeslidersimple-mindifference="0.3">
+          <input type="range" wt-rangeslidersimple-element="input-left" />
+          <input type="range" wt-rangeslidersimple-element="input-right" />
+        </div>
+      </div>
+    `;
+        const wrapper = document.querySelector(
+            '[wt-rangeslidersimple-element="slider-wrapper"]',
+        );
+        const instance = new RangeSliderSimple(wrapper);
+        const left = wrapper.querySelector(
+            '[wt-rangeslidersimple-element="input-left"]',
+        );
+        const right = wrapper.querySelector(
+            '[wt-rangeslidersimple-element="input-right"]',
+        );
+
+        instance.setTo('5');
+        instance.setFrom('4.9');
+
+        // min(4.9, 5 - 0.3) = 4.7 — parseInt would wrongly yield 4
+        expect(left.value).toBe('4.7');
+        expect(right.value).toBe('5');
+    });
 });

From 7b9647322a0a00484cb3e8414aad7c95c3b1333b Mon Sep 17 00:00:00 2001
From: matthewcsimpson <mcsimpson@gmail.com>
Date: Fri, 20 Mar 2026 12:57:41 -0700
Subject: [PATCH 13/15] pr feedback readme update

---
 docs/Functional/RangeSliderSimple.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/Functional/RangeSliderSimple.md b/docs/Functional/RangeSliderSimple.md
index 532a44f..b24e828 100644
--- a/docs/Functional/RangeSliderSimple.md
+++ b/docs/Functional/RangeSliderSimple.md
@@ -42,9 +42,11 @@ One script tag. Use [jsDelivr](https://www.jsdelivr.com/) (not raw GitHub URLs)
 
 - `wt-rangeslidersimple-min` — minimum value (number; default **0**)
 - `wt-rangeslidersimple-max` — maximum value (number; default **100**)
-- `wt-rangeslidersimple-steps` — `step` on both range inputs (number; default **1**). Use any **positive** step the browser accepts for `<input type="range">` (integers or decimals, e.g. `0.1`). Invalid number strings cause initialization to throw.
+- `wt-rangeslidersimple-steps` — `step` on both range inputs (number; default **1**). Use any **positive** step the browser accepts for `<input type="range">` (integers or decimals, e.g. `0.1`).
 - `wt-rangeslidersimple-mindifference` — minimum difference between the two values, in the same units as min/max (default: same as **steps**)
 
+For **min**, **max**, **steps**, and **mindifference**, values must be valid numbers. Invalid strings are configuration errors: the constructor logs `console.error` and **does not rethrow**, so that wrapper’s slider may not fully initialize (e.g. no usable instance on `window.webtricks`).
+
 ### Display and form text
 
 - `wt-rangeslidersimple-formatnumber="true"` — format numeric displays with thousand separators (e.g. `1,000`)

From 2b6f091992fc7313114463f6627e80e51613e9f0 Mon Sep 17 00:00:00 2001
From: matthewcsimpson <mcsimpson@gmail.com>
Date: Fri, 20 Mar 2026 13:03:59 -0700
Subject: [PATCH 14/15] pr feedback: version

---
 README.md                            |  8 ++--
 __tests__/RangeSliderSimple.test.js  | 60 +++++++++++++++++++++++++---
 docs/Functional/RangeSlider.md       |  6 ++-
 docs/Functional/RangeSliderSimple.md |  4 +-
 4 files changed, 68 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 956ee63..0ace1a1 100644
--- a/README.md
+++ b/README.md
@@ -82,15 +82,17 @@ Multiple Scripts: Add as many scripts as you need to your project by referencing
 **Range sliders:** each script is **self-contained** (one tag). Use **`RangeSlider.js`** for custom thumbs or **`RangeSliderSimple.js`** for native thumbs only. Use jsDelivr (not raw `githubusercontent.com`, which often serves `text/plain` and blocks execution).
 
 ```
-<script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@main/Dist/Functional/RangeSlider.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/Functional/RangeSlider.js"></script>
 ```
 
-Native-thumb variant:
+Native-thumb variant (`RangeSliderSimple` is **1.0.0** in source; pin further with a [release tag](https://github.com/TheCodeRaccoons/WebTricks/releases) or commit hash if you need an exact file):
 
 ```
-<script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@main/Dist/Functional/RangeSliderSimple.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/Functional/RangeSliderSimple.js"></script>
 ```
 
+Prefer **`@1`**, a **semver release tag** (e.g. `@v1.0.0`), or a **commit SHA** over **`@main`** for production embeds so the script URL does not move unexpectedly.
+
 If a page uses **both** slider types, you may include **both** scripts; they use separate attribute namespaces (`wt-rangeslider-*` vs `wt-rangeslidersimple-*`).
 
 Ready to Use: Once imported, the scripts initialize automatically, provided the correct HTML attributes are in place.
diff --git a/__tests__/RangeSliderSimple.test.js b/__tests__/RangeSliderSimple.test.js
index e36852d..29b9e8a 100644
--- a/__tests__/RangeSliderSimple.test.js
+++ b/__tests__/RangeSliderSimple.test.js
@@ -44,8 +44,19 @@ describe('RangeSliderSimple', () => {
         const right = wrapper.querySelector(
             '[wt-rangeslidersimple-element="input-right"]',
         );
+        const displayFrom = wrapper.querySelector(
+            '[wt-rangeslidersimple-display="from"]',
+        );
+        const displayTo = wrapper.querySelector(
+            '[wt-rangeslidersimple-display="to"]',
+        );
         expect(left.value).toBe('0');
         expect(right.value).toBe('100');
+        expect(left.min).toBe('0');
+        expect(left.max).toBe('100');
+        expect(left.step).toBe('1');
+        expect(displayFrom.textContent).toBe('0');
+        expect(displayTo.textContent).toBe('100');
         expect(instance.sliderMin).toBe(0);
         expect(instance.sliderMax).toBe(100);
     });
@@ -94,6 +105,27 @@ describe('RangeSliderSimple', () => {
             '[wt-rangeslidersimple-element="slider-wrapper"]',
         );
         const instance = new RangeSliderSimple(wrapper);
+
+        instance.setTo('5');
+        instance.setFrom('4.9');
+
+        // min(4.9, 5 - 0.3) = 4.7 — parseInt would wrongly yield 4
+        expect(
+            wrapper.querySelector('[wt-rangeslidersimple-element="input-left"]')
+                .value,
+        ).toBe('4.7');
+        expect(
+            wrapper.querySelector('[wt-rangeslidersimple-element="input-right"]')
+                .value,
+        ).toBe('5');
+    });
+
+    test('constrainRightValue keeps at least minDifference above left handle', () => {
+        mountSlider();
+        const wrapper = document.querySelector(
+            '[wt-rangeslidersimple-element="slider-wrapper"]',
+        );
+        const instance = new RangeSliderSimple(wrapper);
         const left = wrapper.querySelector(
             '[wt-rangeslidersimple-element="input-left"]',
         );
@@ -101,11 +133,29 @@ describe('RangeSliderSimple', () => {
             '[wt-rangeslidersimple-element="input-right"]',
         );
 
-        instance.setTo('5');
-        instance.setFrom('4.9');
+        instance.setFrom('60');
+        instance.setTo('30');
 
-        // min(4.9, 5 - 0.3) = 4.7 — parseInt would wrongly yield 4
-        expect(left.value).toBe('4.7');
-        expect(right.value).toBe('5');
+        // max(30, 60 + 1) = 61 with mindifference === 1
+        expect(left.value).toBe('60');
+        expect(right.value).toBe('61');
+    });
+
+    test('reset restores min and max on both inputs', () => {
+        mountSlider();
+        const wrapper = document.querySelector(
+            '[wt-rangeslidersimple-element="slider-wrapper"]',
+        );
+        const instance = new RangeSliderSimple(wrapper);
+        instance.setRange('40', '50');
+        instance.reset();
+        const left = wrapper.querySelector(
+            '[wt-rangeslidersimple-element="input-left"]',
+        );
+        const right = wrapper.querySelector(
+            '[wt-rangeslidersimple-element="input-right"]',
+        );
+        expect(left.value).toBe('0');
+        expect(right.value).toBe('100');
     });
 });
diff --git a/docs/Functional/RangeSlider.md b/docs/Functional/RangeSlider.md
index be42bf2..2c02dcb 100644
--- a/docs/Functional/RangeSlider.md
+++ b/docs/Functional/RangeSlider.md
@@ -30,10 +30,14 @@ Add the script to your project and include the required attributes and elements
 
 Self-contained: **one** script tag. Use [jsDelivr](https://www.jsdelivr.com/) (not raw GitHub URLs) so the MIME type is JavaScript.
 
+Pin to a **Git tag** (not `@main`) so embeds don’t change when the default branch moves. This module is **1.1.0** above—use that release ref when it exists:
+
 ```html
-<script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@main/Dist/Functional/RangeSlider.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@v1.1.0/Dist/Functional/RangeSlider.js"></script>
 ```
 
+If `v1.1.0` is not published on the repo yet, use another tag from [Releases](https://github.com/TheCodeRaccoons/WebTricks/releases), a **commit SHA**, or `@1` (major ref; same idea as the main README) until you ship a matching tag.
+
 ### Required Attributes
 
 - `wt-rangeslider-element="slider-wrapper"` - Container element
diff --git a/docs/Functional/RangeSliderSimple.md b/docs/Functional/RangeSliderSimple.md
index b24e828..a6e3fb9 100644
--- a/docs/Functional/RangeSliderSimple.md
+++ b/docs/Functional/RangeSliderSimple.md
@@ -26,9 +26,11 @@ The script is **self-contained** (single file, one `<script>` tag).
 One script tag. Use [jsDelivr](https://www.jsdelivr.com/) (not raw GitHub URLs) so the MIME type is JavaScript.
 
 ```html
-<script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@main/Dist/Functional/RangeSliderSimple.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/Functional/RangeSliderSimple.js"></script>
 ```
 
+Pin with a [GitHub release](https://github.com/TheCodeRaccoons/WebTricks/releases) tag or commit hash instead of `@main` when you need a fixed build.
+
 ## Required attributes
 
 - `wt-rangeslidersimple-element="slider-wrapper"` — outer container

From c8eaab9d6b2d7ba35d24cd439d451e665233b99d Mon Sep 17 00:00:00 2001
From: matthewcsimpson <mcsimpson@gmail.com>
Date: Fri, 20 Mar 2026 13:08:04 -0700
Subject: [PATCH 15/15] pr feedback

---
 Dist/Functional/RangeSlider.js       |  8 ++--
 Dist/Functional/RangeSliderSimple.js |  8 ++--
 README.md                            |  6 +--
 __tests__/RangeSlider.test.js        | 47 +++++++++++++++++++++++
 __tests__/RangeSliderSimple.test.js  | 57 +++++++++++++++++++++++++++-
 5 files changed, 114 insertions(+), 12 deletions(-)

diff --git a/Dist/Functional/RangeSlider.js b/Dist/Functional/RangeSlider.js
index ee1532e..5639bb3 100644
--- a/Dist/Functional/RangeSlider.js
+++ b/Dist/Functional/RangeSlider.js
@@ -51,15 +51,15 @@ var __WT_RANGE_SLIDER_CORE = (function () {
 
     function constrainLeftValue(rawValue, rightValueStr, minDifference) {
         return Math.min(
-            parseFloat(rawValue),
-            parseFloat(rightValueStr) - minDifference,
+            Number(rawValue),
+            Number(rightValueStr) - minDifference,
         );
     }
 
     function constrainRightValue(rawValue, leftValueStr, minDifference) {
         return Math.max(
-            parseFloat(rawValue),
-            parseFloat(leftValueStr) + minDifference,
+            Number(rawValue),
+            Number(leftValueStr) + minDifference,
         );
     }
 
diff --git a/Dist/Functional/RangeSliderSimple.js b/Dist/Functional/RangeSliderSimple.js
index 05dc40b..0ea6001 100644
--- a/Dist/Functional/RangeSliderSimple.js
+++ b/Dist/Functional/RangeSliderSimple.js
@@ -47,15 +47,15 @@ var __WT_RANGE_SLIDER_SIMPLE_CORE = (function () {
 
     function constrainLeftValue(rawValue, rightValueStr, minDifference) {
         return Math.min(
-            parseFloat(rawValue),
-            parseFloat(rightValueStr) - minDifference,
+            Number(rawValue),
+            Number(rightValueStr) - minDifference,
         );
     }
 
     function constrainRightValue(rawValue, leftValueStr, minDifference) {
         return Math.max(
-            parseFloat(rawValue),
-            parseFloat(leftValueStr) + minDifference,
+            Number(rawValue),
+            Number(leftValueStr) + minDifference,
         );
     }
 
diff --git a/README.md b/README.md
index 0ace1a1..2e2a8ce 100644
--- a/README.md
+++ b/README.md
@@ -79,19 +79,19 @@ Multiple Scripts: Add as many scripts as you need to your project by referencing
 <script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/webtricks@1/dist/Functional/FormCheck.min.js"></script>
 ```
 
-**Range sliders:** each script is **self-contained** (one tag). Use **`RangeSlider.js`** for custom thumbs or **`RangeSliderSimple.js`** for native thumbs only. Use jsDelivr (not raw `githubusercontent.com`, which often serves `text/plain` and blocks execution).
+**Range sliders:** each script is **self-contained** (one tag). Use **`RangeSlider.js`** for custom thumbs or **`RangeSliderSimple.js`** for native thumbs only. Use jsDelivr (not raw `githubusercontent.com`, which often serves `text/plain` and blocks execution). The URLs below use **`@1`**, same as the other jsDelivr examples in this README—**not `@main`**, so embeds stay on a stable major ref.
 
 ```
 <script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/Functional/RangeSlider.js"></script>
 ```
 
-Native-thumb variant (`RangeSliderSimple` is **1.0.0** in source; pin further with a [release tag](https://github.com/TheCodeRaccoons/WebTricks/releases) or commit hash if you need an exact file):
+Native-thumb variant (`RangeSliderSimple` is **1.0.0** in source):
 
 ```
 <script src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/Functional/RangeSliderSimple.js"></script>
 ```
 
-Prefer **`@1`**, a **semver release tag** (e.g. `@v1.0.0`), or a **commit SHA** over **`@main`** for production embeds so the script URL does not move unexpectedly.
+For a **stricter** pin, use a [release tag](https://github.com/TheCodeRaccoons/WebTricks/releases) (e.g. `@v1.1.0` for RangeSlider, `@v1.0.0` for RangeSliderSimple) or a **commit SHA**.
 
 If a page uses **both** slider types, you may include **both** scripts; they use separate attribute namespaces (`wt-rangeslider-*` vs `wt-rangeslidersimple-*`).
 
diff --git a/__tests__/RangeSlider.test.js b/__tests__/RangeSlider.test.js
index 14f696d..9250eca 100644
--- a/__tests__/RangeSlider.test.js
+++ b/__tests__/RangeSlider.test.js
@@ -48,6 +48,53 @@ describe('RangeSlider', () => {
         expect(window.webtricks.some((e) => e.RangeSlider)).toBe(true);
     });
 
+    describe('constraint numeric parsing (integers and decimals)', () => {
+        test('integer string handles setRange without truncation', () => {
+            mountRangeSlider();
+            const wrapper = document.querySelector(
+                '[wt-rangeslider-element="slider-wrapper"]',
+            );
+            const rs = new RangeSlider(wrapper);
+            rs.setRange('33', '77');
+            const left = wrapper.querySelector(
+                '[wt-rangeslider-element="input-left"]',
+            );
+            const right = wrapper.querySelector(
+                '[wt-rangeslider-element="input-right"]',
+            );
+            expect(left.value).toBe('33');
+            expect(right.value).toBe('77');
+        });
+
+        test('decimal string handles keep fractional precision when constraining', () => {
+            document.body.innerHTML = `
+      <div wt-rangeslider-element="slider-wrapper">
+        <div wt-rangeslider-element="slider"
+             wt-rangeslider-min="0"
+             wt-rangeslider-max="10"
+             wt-rangeslider-steps="0.1"
+             wt-rangeslider-mindifference="0.2">
+          <div wt-rangeslider-element="range"></div>
+          <div wt-rangeslider-element="thumb-left"></div>
+          <div wt-rangeslider-element="thumb-right"></div>
+          <input type="range" wt-rangeslider-element="input-left" />
+          <input type="range" wt-rangeslider-element="input-right" />
+        </div>
+      </div>
+    `;
+            const wrapper = document.querySelector(
+                '[wt-rangeslider-element="slider-wrapper"]',
+            );
+            const rs = new RangeSlider(wrapper);
+            rs.setTo('2.5');
+            rs.setFrom('2.35');
+            const left = wrapper.querySelector(
+                '[wt-rangeslider-element="input-left"]',
+            );
+            expect(left.value).toBe('2.3');
+        });
+    });
+
     test('decimal mindifference constrains without parseInt truncation', () => {
         document.body.innerHTML = `
       <div wt-rangeslider-element="slider-wrapper">
diff --git a/__tests__/RangeSliderSimple.test.js b/__tests__/RangeSliderSimple.test.js
index 29b9e8a..f20f244 100644
--- a/__tests__/RangeSliderSimple.test.js
+++ b/__tests__/RangeSliderSimple.test.js
@@ -67,7 +67,62 @@ describe('RangeSliderSimple', () => {
         expect(window.webtricks.some((e) => e.RangeSliderSimple)).toBe(true);
     });
 
-    test('integer step and minDifference still constrain (parseFloat handles whole numbers)', () => {
+    describe('constraint numeric parsing (supports integers and decimals, not parseInt truncation)', () => {
+        test('integer string handles setRange without truncation', () => {
+            mountSlider();
+            const wrapper = document.querySelector(
+                '[wt-rangeslidersimple-element="slider-wrapper"]',
+            );
+            const instance = new RangeSliderSimple(wrapper);
+            const left = wrapper.querySelector(
+                '[wt-rangeslidersimple-element="input-left"]',
+            );
+            const right = wrapper.querySelector(
+                '[wt-rangeslidersimple-element="input-right"]',
+            );
+
+            instance.setRange('33', '77');
+
+            expect(left.value).toBe('33');
+            expect(right.value).toBe('77');
+        });
+
+        test('decimal string handles keep fractional precision when constraining', () => {
+            document.body.innerHTML = `
+      <div wt-rangeslidersimple-element="slider-wrapper">
+        <div wt-rangeslidersimple-element="slider"
+             wt-rangeslidersimple-min="0"
+             wt-rangeslidersimple-max="10"
+             wt-rangeslidersimple-steps="0.1"
+             wt-rangeslidersimple-mindifference="0.2">
+          <input type="range" wt-rangeslidersimple-element="input-left" />
+          <input type="range" wt-rangeslidersimple-element="input-right" />
+        </div>
+      </div>
+    `;
+            const wrapper = document.querySelector(
+                '[wt-rangeslidersimple-element="slider-wrapper"]',
+            );
+            const instance = new RangeSliderSimple(wrapper);
+
+            instance.setTo('2.5');
+            instance.setFrom('2.35');
+
+            // min(2.35, 2.5 - 0.2) = 2.3 — parseInt would wrongly use min(2, 2.3) = 2
+            expect(
+                wrapper.querySelector(
+                    '[wt-rangeslidersimple-element="input-left"]',
+                ).value,
+            ).toBe('2.3');
+            expect(
+                wrapper.querySelector(
+                    '[wt-rangeslidersimple-element="input-right"]',
+                ).value,
+            ).toBe('2.5');
+        });
+    });
+
+    test('integer step and minDifference still constrain (Number handles whole numbers)', () => {
         mountSlider();
         const wrapper = document.querySelector(
             '[wt-rangeslidersimple-element="slider-wrapper"]',