feat: rangeslidersimple

Author: matthewcsimpson

Dist/Functional/RangeSlider.js

@@ -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.
 
 

Dist/Functional/RangeSliderSimple.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);
+    });
+});

README.md

@@ -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);
+    });
+});

__tests__/RangeSlider.test.js

@@ -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,25 +20,30 @@ 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
 - `wt-cookieconsent-element="categories-form"` - Form for custom category selection
 - `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
+5. Third-party service integration

__tests__/RangeSliderSimple.test.js

@@ -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,15 +93,17 @@ 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
 4. Contact information copying
 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
+5. Include fallback for unsupported browsers

docs/Functional/CookieConsent.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
+5. Loading indicators