advanced-filter-system 1.0.7 → 1.0.9

package/dist/AFS.esm.js

@@ -139,68 +139,111 @@ class Options {
    */
   static defaults = {
     // Selectors
-    containerSelector: '.filter-container',
-    itemSelector: '.filter-item',
-    filterButtonSelector: '.btn-filter',
-    searchInputSelector: '.filter-search',
-    counterSelector: '.filter-counter',
+    containerSelector: ".afs-filter-container",
+    itemSelector: ".afs-filter-item",
+    filterButtonSelector: ".afs-btn-filter",
+    searchInputSelector: ".afs-filter-search",
+    counterSelector: ".afs-filter-counter",
     // Classes
-    activeClass: 'active',
-    hiddenClass: 'hidden',
-    // Animation
-    animationDuration: 300,
-    animationType: 'fade',
-    animationEasing: 'ease-out',
+    activeClass: "active",
+    hiddenClass: "hidden",
     // Filtering
-    filterMode: 'OR',
-    searchKeys: ['title'],
+    filterMode: "OR",
+    searchKeys: ["title"],
     debounceTime: 300,
     // Debug
     debug: false,
-    logLevel: 'info',
+    logLevel: "info",
     // Date handling
-    dateFormat: 'YYYY-MM-DD',
+    dateFormat: "YYYY-MM-DD",
     counter: {
-      template: 'Showing {visible} of {total}',
+      template: "Showing {visible} of {total}",
       showFiltered: true,
-      filteredTemplate: '({filtered} filtered)',
-      noResultsTemplate: 'No items found',
+      filteredTemplate: "({filtered} filtered)",
+      noResultsTemplate: "No items found",
       formatter: num => num.toLocaleString()
     },
     // Styles
     styles: {
       slider: {
-        class: 'afs-range-slider',
-        trackClass: 'afs-range-track',
-        thumbClass: 'afs-range-thumb',
-        valueClass: 'afs-range-value',
-        selectedClass: 'afs-range-selected',
         // Add new UI options
         ui: {
           showHistogram: false,
-          bins: 10 // Number of bins for histogram
+          bins: 10,
+          // Number of bins for histogram
+          track: {
+            radius: "0",
+            // Button radius
+            background: "#e5e7eb" // Track color
+          },
+          thumb: {
+            radius: "50%",
+            // Button radius
+            size: "16px",
+            // Button size
+            background: "#000" // Button color
+          },
+          histogram: {
+            background: "#e5e7eb",
+            // Histogram background
+            bar: {
+              background: "#000" // Bar color
+            }
+          }
+        }
+      },
+      pagination: {
+        ui: {
+          button: {
+            background: "transparent",
+            border: "1px solid #000",
+            borderRadius: "4px",
+            padding: "8px 12px",
+            color: "#000",
+            active: {
+              background: "#000",
+              color: "#fff"
+            },
+            hover: {
+              background: "#000",
+              color: "#fff"
+            }
+          }
         }
       },
       colors: {
-        primary: '#000',
-        background: '#e5e7eb',
-        text: '#000',
-        histogram: '#e5e7eb',
-        // For histogram bars
-        histogramActive: '#000' // For active histogram bars
+        primary: "#000",
+        background: "#e5e7eb",
+        text: "#000"
       }
     },
+    // Slider
+    slider: {
+      containerClass: "afs-range-slider",
+      trackClass: "afs-range-track",
+      thumbClass: "afs-range-thumb",
+      valueClass: "afs-range-value",
+      selectedClass: "afs-range-selected"
+    },
     // Pagination
     pagination: {
       enabled: false,
       itemsPerPage: 10,
-      container: '.afs-pagination-container',
-      pageButtonClass: 'afs-page-button',
-      activePageClass: 'afs-page-active',
-      containerClass: 'afs-pagination',
+      container: ".afs-pagination-container",
+      pageButtonClass: "afs-page-button",
+      activePageClass: "afs-page-active",
+      containerClass: "afs-pagination",
       scrollToTop: false,
       scrollOffset: 50,
-      scrollBehavior: 'smooth' // or 'auto' for instant scroll
+      scrollBehavior: "smooth" // or 'auto' for instant scroll
+    },
+    // Animation
+    animation: {
+      type: "fade",
+      duration: 300,
+      easing: "ease-out",
+      inClass: "afs-animation-enter",
+      outClass: "afs-animation-leave"
     }
   };
   constructor() {
@@ -238,9 +281,9 @@ class Options {
       ...target
     };
     for (const key in source) {
-      if (source[key] !== null && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+      if (source[key] !== null && typeof source[key] === "object" && !Array.isArray(source[key])) {
         // If the key doesn't exist in target or isn't an object, create/override it
-        if (!target[key] || typeof target[key] !== 'object') {
+        if (!target[key] || typeof target[key] !== "object") {
           result[key] = {};
         }
         // Recursively merge nested objects
@@ -260,37 +303,37 @@ class Options {
    */
   validate() {
     // Required selectors
-    const requiredSelectors = ['containerSelector', 'itemSelector'];
+    const requiredSelectors = ["containerSelector", "itemSelector"];
     for (const selector of requiredSelectors) {
-      if (typeof this.options[selector] !== 'string') {
+      if (typeof this.options[selector] !== "string") {
         throw new Error(`${selector} must be a string`);
       }
     }
 
     // Animation duration
-    if (typeof this.options.animationDuration !== 'number' || this.options.animationDuration < 0) {
-      throw new Error('animationDuration must be a positive number');
+    if (typeof this.options.animation.duration !== "number" || this.options.animation.duration < 0) {
+      throw new Error("animationDuration must be a positive number");
     }
 
     // Filter mode
-    if (!['OR', 'AND'].includes(this.options.filterMode.toUpperCase())) {
+    if (!["OR", "AND"].includes(this.options.filterMode.toUpperCase())) {
       throw new Error('filterMode must be either "OR" or "AND"');
     }
 
     // Search keys
     if (!Array.isArray(this.options.searchKeys) || this.options.searchKeys.length === 0) {
-      throw new Error('searchKeys must be a non-empty array');
+      throw new Error("searchKeys must be a non-empty array");
     }
 
     // Counter validation
     if (this.options.counter) {
-      if (typeof this.options.counter.template !== 'string') {
-        throw new Error('counter.template must be a string');
+      if (typeof this.options.counter.template !== "string") {
+        throw new Error("counter.template must be a string");
       }
-      if (typeof this.options.counter.showFiltered !== 'boolean') {
+      if (typeof this.options.counter.showFiltered !== "boolean") {
         this.options.counter.showFiltered = true; // Set default
       }
-      if (typeof this.options.counter.formatter !== 'function') {
+      if (typeof this.options.counter.formatter !== "function") {
         this.options.counter.formatter = num => num.toLocaleString(); // Set default
       }
     } else {
@@ -306,7 +349,7 @@ class Options {
    * @returns {any} Option value
    */
   get(path) {
-    return path.split('.').reduce((obj, key) => obj?.[key], this.options);
+    return path.split(".").reduce((obj, key) => obj?.[key], this.options);
   }
 
   /**
@@ -315,7 +358,7 @@ class Options {
    * @param {any} value - New value
    */
   set(path, value) {
-    const parts = path.split('.');
+    const parts = path.split(".");
     const last = parts.pop();
     const target = parts.reduce((obj, key) => {
       if (!(key in obj)) obj[key] = {};
@@ -515,24 +558,6 @@ class StyleManager {
   constructor(options) {
     this.options = options;
     this.styleElement = null;
-    this.defaultStyles = {
-      slider: {
-        class: "afs-range-slider",
-        trackClass: "afs-range-track",
-        thumbClass: "afs-range-thumb",
-        valueClass: "afs-range-value",
-        selectedClass: "afs-range-selected"
-      },
-      colors: {
-        primary: "#000",
-        background: "#ddd",
-        text: "#000"
-      },
-      animation: {
-        duration: "300ms",
-        type: "ease-out"
-      }
-    };
   }
 
   /**
@@ -542,11 +567,11 @@ class StyleManager {
    */
   createBaseStyles() {
     const hiddenClass = this.options.get("hiddenClass") || "hidden";
-    const itemSelector = this.options.get("itemSelector") || ".filter-item";
-    const filterButtonSelector = this.options.get("filterButtonSelector") || ".btn-filter";
+    const itemSelector = this.options.get("itemSelector") || ".afs-filter-item";
+    const filterButtonSelector = this.options.get("filterButtonSelector") || ".afs-btn-filter";
     const activeClass = this.options.get("activeClass") || "active";
-    const animationDuration = this.options.get("animationDuration") || '300ms';
-    const animationEasing = this.options.get("animationEasing") || 'ease-out';
+    const animationDuration = this.options.get("animation.duration") || '300ms';
+    const animationEasing = this.options.get("animation.easing") || 'ease-out';
     return `
       .${hiddenClass} {
         display: none !important;
@@ -584,12 +609,18 @@ class StyleManager {
    * @returns {string} CSS styles
    */
   createRangeStyles() {
-    const styles = this.options.get("styles") || this.defaultStyles;
-    const sliderStyles = styles.slider || this.defaultStyles.slider;
-    const colors = styles.colors || this.defaultStyles.colors;
+    const styles = this.options.get("styles");
+    const sliderOptions = this.options.get("slider") || {};
+    const sliderStyles = styles.slider;
+    const colors = styles.colors;
+    const containerClass = sliderOptions.containerClass || "afs-range-slider";
+    const trackClass = sliderOptions.trackClass || "afs-range-track";
+    const thumbClass = sliderOptions.thumbClass || "afs-range-thumb";
+    const valueClass = sliderOptions.valueClass || "afs-range-value";
+    const selectedClass = sliderOptions.selectedClass || "afs-range-selected";
     return `
     /* Range Slider Styles */
-    .${sliderStyles.class} {
+    .${containerClass} {
       position: relative;
       width: auto;
       height: 40px;
@@ -597,29 +628,29 @@ class StyleManager {
       padding: 0 8px;
     }
 
-    .${sliderStyles.trackClass} {
+    .${trackClass} {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       width: 100%;
       height: 4px;
-      background: ${colors.background};
-      border-radius: 2px;
+      background: ${sliderStyles.ui.track.background || colors.background};
+      border-radius: ${sliderStyles.ui.track.radius || "0"};
     }
 
-    .${sliderStyles.thumbClass} {
+    .${thumbClass} {
       position: absolute;
       top: 50%;
-      width: 16px;
-      height: 16px;
-      background: ${colors.primary};
-      border-radius: 50%;
+      width: ${sliderStyles.ui.thumb.size || "16px"};
+      height: ${sliderStyles.ui.thumb.size || "16px"};
+      background: ${sliderStyles.ui.thumb.background || colors.primary};
+      border-radius: ${sliderStyles.ui.thumb.radius || "50%"};
       transform: translate(-50%, -50%);
       cursor: pointer;
       z-index: 2;
     }
 
-    .${sliderStyles.valueClass} {
+    .${valueClass} {
       position: absolute;
       top: -20px;
       transform: translateX(-50%);
@@ -627,7 +658,7 @@ class StyleManager {
       color: ${colors.text};
     }
 
-    .${sliderStyles.selectedClass} {
+    .${selectedClass} {
       position: absolute;
       height: 4px;
       background: ${colors.primary};
@@ -650,13 +681,13 @@ class StyleManager {
 
     .afs-histogram-bar {
       flex: 1;
-      background-color: ${colors.background};
+      background-color: ${sliderStyles.ui.histogram.background || colors.background};
       min-height: 4px;
       transition: background-color 0.2s ease;
     }
 
     .afs-histogram-bar.active {
-      background-color: ${colors.primary};
+      background-color: ${sliderStyles.ui.histogram.bar.background || colors.primary};
     }
   `;
   }
@@ -667,7 +698,7 @@ class StyleManager {
    * @returns {string} CSS styles
    */
   createDateStyles() {
-    const colors = (this.options.get("styles") || this.defaultStyles).colors;
+    const colors = this.options.get("styles").colors;
     return `
     .afs-date-range-container {
       display: flex;
@@ -704,6 +735,49 @@ class StyleManager {
   `;
   }
 
+  /**
+   * Create date filter styles
+   * @private
+   * @returns {string} CSS styles
+   */
+  createInputRangeStyles() {
+    const colors = this.options.get("styles").colors;
+    return `
+        .afs-input-range-container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+            margin: 10px 0;
+        }
+
+        .afs-input-wrapper {
+            flex: 1;
+        }
+
+        .afs-input-label {
+            display: block;
+            font-size: 0.875rem;
+            color: ${colors.text};
+            margin-bottom: 0.5rem;
+        }
+
+        .afs-input {
+            width: 100%;
+            padding: 0.5rem;
+            border: 1px solid ${colors.background};
+            border-radius: 0.25rem;
+            font-size: 0.875rem;
+            color: ${colors.text};
+            transition: border-color 0.2s ease;
+        }
+
+        .afs-input:focus {
+            outline: none;
+            border-color: ${colors.primary};
+        }
+    `;
+  }
+
   /**
    * Apply all styles
    * @public
@@ -725,6 +799,9 @@ class StyleManager {
 
       /* Search styles */
       ${this.createSearchStyles()}
+
+      /* Input range styles */
+      ${this.createInputRangeStyles()}
     `;
       if (this.styleElement) {
         this.styleElement.textContent = styles;
@@ -752,11 +829,13 @@ class StyleManager {
    * @returns {string} CSS styles
    */
   createPaginationStyles() {
+    const styles = this.options.get("styles");
     const paginationOptions = this.options.get("pagination") || {};
-    const colors = (this.options.get("styles") || this.defaultStyles).colors;
+    const colors = this.options.get("styles").colors;
     const containerClass = paginationOptions.containerClass || "afs-pagination";
     const buttonClass = paginationOptions.pageButtonClass || "afs-page-button";
     const activeClass = paginationOptions.activePageClass || "afs-page-active";
+    const paginationStyles = styles.pagination;
     return `
       .${containerClass} {
         display: flex;
@@ -766,23 +845,23 @@ class StyleManager {
       }
 
       .${buttonClass} {
-        padding: 8px 12px;
-        border: 1px solid ${colors.primary};
-        border-radius: 4px;
+        padding: ${paginationStyles.ui.button.padding || '8px 12px'};
+        border: ${paginationStyles.ui.button.border || '1px solid ' + colors.primary};
+        border-radius: ${paginationStyles.ui.button.borderRadius || '4px'};
         cursor: pointer;
         transition: all 200ms ease-out;
-        background: transparent;
-        color: ${colors.primary};
+        background: ${paginationStyles.ui.button.background || 'transparent'};
+        color: ${paginationStyles.ui.button.color || colors.primary};
       }
 
       .${buttonClass}:hover {
-        background: ${colors.primary};
-        color: white;
+        background: ${paginationStyles.ui.button.hover.background || colors.primary};
+        color: ${paginationStyles.ui.button.hover.color || 'white'};
       }
 
       .${buttonClass}.${activeClass} {
-        background: ${colors.primary};
-        color: white;
+        background: ${paginationStyles.ui.button.active.background || colors.primary};
+        color: ${paginationStyles.ui.button.active.color || 'white'};
       }
 
       .${buttonClass}:disabled {
@@ -799,7 +878,7 @@ class StyleManager {
    */
   createSearchStyles() {
     const searchClass = this.options.get("searchInputClass") || "afs-search";
-    const colors = (this.options.get("styles") || this.defaultStyles).colors;
+    const colors = this.options.get("styles").colors;
     return `
       .${searchClass} {
         padding: 8px;
@@ -1143,9 +1222,14 @@ class Animation {
   }
   applyShowAnimation(item) {
     let animationType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'fade';
-    const duration = this.options.get('animationDuration') || '300ms';
+    const duration = this.options.get('animation.duration') || '300ms';
     const animation = this.animations[animationType]?.in || this.animations.fade.in;
+
+    // Ensure display is set
     item.style.display = 'block';
+    item.style.opacity = '0'; // Start with opacity 0
+
+    // Apply animation in next frame
     requestAnimationFrame(() => {
       Object.assign(item.style, animation, {
         transition: `opacity ${duration} ${animation.transitionTimingFunction}, transform ${duration} ${animation.transitionTimingFunction}`
@@ -1154,7 +1238,7 @@ class Animation {
   }
   applyHideAnimation(item) {
     let animationType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'fade';
-    const duration = this.options.get('animationDuration') || '300ms';
+    const duration = this.options.get('animation.duration') || '300ms';
     const animation = this.animations[animationType]?.out || this.animations.fade.out;
     Object.assign(item.style, animation, {
       transition: `opacity ${duration} ${animation.transitionTimingFunction}, transform ${duration} ${animation.transitionTimingFunction}`
@@ -1166,7 +1250,7 @@ class Animation {
     item.addEventListener('transitionend', handleTransitionEnd);
   }
   setAnimation(animationType) {
-    this.afs.options.set('animationType', animationType);
+    this.afs.options.set('animation.type', animationType);
   }
 }
 
@@ -1313,26 +1397,39 @@ class Filter {
     // Clear filter groups
     this.filterGroups.clear();
 
-    // Force all items to be visible first
-    const visibleItems = new Set(this.afs.items);
-    this.afs.state.setState("items.visible", visibleItems);
+    // Create a promise to track animations
+    const animationPromises = [];
 
     // Show all items with animation
     this.afs.items.forEach(item => {
-      item.classList.remove(this.afs.options.get('hiddenClass'));
-      requestAnimationFrame(() => {
-        this.animation.applyShowAnimation(item, this.afs.options.get("animationType"));
+      const promise = new Promise(resolve => {
+        item.classList.remove(this.afs.options.get('hiddenClass'));
+        item.style.display = 'block'; // Ensure item is visible
+
+        requestAnimationFrame(() => {
+          this.animation.applyShowAnimation(item, this.afs.options.get("animation.type"));
+          // Resolve after animation duration
+          setTimeout(resolve, this.afs.options.get("animation.duration") || 300);
+        });
       });
+      animationPromises.push(promise);
     });
 
-    // Update counter after reset
-    this.afs.updateCounter();
+    // Update state after all items are visible
+    const visibleItems = new Set(this.afs.items);
+    this.afs.state.setState("items.visible", visibleItems);
 
-    // Update URL after reset
-    this.afs.urlManager.updateURL();
+    // Wait for all animations to complete
+    Promise.all(animationPromises).then(() => {
+      // Update counter
+      this.afs.updateCounter();
 
-    // Emit event
-    this.afs.emit("filtersReset");
+      // Update URL
+      this.afs.urlManager.updateURL();
+
+      // Emit event
+      this.afs.emit("filtersReset");
+    });
   }
 
   /**
@@ -1403,60 +1500,64 @@ class Filter {
   * @public
   */
   applyFilters() {
-    // Log active filters
     const activeFilters = Array.from(this.activeFilters);
     this.afs.logger.debug("Active filters:", activeFilters);
-    this.afs.logger.debug("Applying filters");
     const previouslyVisible = new Set(this.afs.state.getState().items.visible);
     const visibleItems = new Set();
 
-    // First pass: determine which items should be visible
+    // First determine visibility
     this.afs.items.forEach(item => {
       if (this.activeFilters.has("*") || this.itemMatchesFilters(item)) {
         visibleItems.add(item);
       }
     });
 
-    // Update state with determined visible items
+    // Update state before animations
     this.afs.state.setState("items.visible", visibleItems);
 
-    // Second pass: apply animations based on visibility changes
+    // Track animation promises
+    const animationPromises = [];
+
+    // Apply animations
     this.afs.items.forEach(item => {
-      if (visibleItems.has(item)) {
-        // Remove hidden class first
-        item.classList.remove(this.afs.options.get('hiddenClass'));
-        // Then apply show animation in next frame
-        requestAnimationFrame(() => {
-          this.animation.applyShowAnimation(item, this.afs.options.get("animationType"));
-        });
-      } else {
-        // Apply hide animation
-        requestAnimationFrame(() => {
-          this.animation.applyHideAnimation(item, this.afs.options.get("animationType"));
-        });
-      }
+      const promise = new Promise(resolve => {
+        if (visibleItems.has(item)) {
+          // Show item
+          item.classList.remove(this.afs.options.get('hiddenClass'));
+          requestAnimationFrame(() => {
+            this.animation.applyShowAnimation(item, this.afs.options.get("animation.type"));
+            setTimeout(resolve, parseFloat(this.afs.options.get("animation.duration")) || 300);
+          });
+        } else {
+          // Hide item
+          requestAnimationFrame(() => {
+            this.animation.applyHideAnimation(item, this.afs.options.get("animation.type"));
+            setTimeout(resolve, parseFloat(this.afs.options.get("animation.duration")) || 300);
+          });
+        }
+      });
+      animationPromises.push(promise);
     });
 
-    // Emit events and update UI
-    this.emitFilterEvents(previouslyVisible, visibleItems);
-
-    // Schedule UI updates
-    requestAnimationFrame(() => {
-      // Force reflow to ensure animations play
-      this.afs.container.offsetHeight;
+    // Handle completion
+    Promise.all(animationPromises).then(() => {
+      // Ensure visible items remain visible
+      visibleItems.forEach(item => {
+        item.style.display = 'block';
+        item.style.opacity = '1';
+      });
 
-      // Update counter - this needs to happen after filter changes
+      // Update UI
       this.afs.updateCounter();
-
-      // Update URL
       this.afs.urlManager.updateURL();
-
-      // Emit final event
       this.afs.emit("filtersApplied", {
         activeFilters,
         visibleItems: visibleItems.size
       });
     });
+
+    // Emit visibility change events
+    this.emitFilterEvents(previouslyVisible, visibleItems);
   }
 
   /**
@@ -2004,6 +2105,310 @@ function debounce(func, wait) {
   };
 }
 
+/**
+ * @fileoverview Input range filter implementation for AFS
+ */
+
+class InputRangeFilter {
+  constructor(afs) {
+    this.afs = afs;
+    this.activeRanges = new Map();
+  }
+
+  /**
+   * @typedef {Object} InputRangeOptions
+   * @property {string} key - Data attribute key
+   * @property {HTMLElement} container - Container element
+   * @property {number} [min] - Minimum value
+   * @property {number} [max] - Maximum value
+   * @property {number} [step] - Step value
+   * @property {string} [label] - Label for the input range
+   */
+
+  /**
+   * Add input range filter
+   * @param {InputRangeOptions} options - Input range options
+   */
+  addInputRange(_ref) {
+    let {
+      key,
+      container,
+      min,
+      max,
+      step = 1,
+      label = ''
+    } = _ref;
+    this.afs.logger.debug(`Adding input range for ${key}`);
+    if (!container) {
+      this.afs.logger.error('Container element required for input range');
+      return;
+    }
+
+    // Calculate min/max if not provided
+    const values = this.calculateMinMax(key);
+    min = min ?? values.min;
+    max = max ?? values.max;
+
+    // Create input elements
+    const elements = this.createInputElements(label);
+    const state = this.initializeState(min, max, step);
+
+    // Add elements to container
+    this.appendElements(container, elements);
+
+    // Setup event handlers
+    this.setupEventHandlers(elements, state, key);
+
+    // Store state
+    this.activeRanges.set(key, {
+      state,
+      elements
+    });
+
+    // Initial update
+    this.updateInputUI(key);
+    this.afs.logger.info(`Input range added for ${key}`);
+  }
+
+  /**
+   * Calculate min and max values from items
+   * @private
+   */
+  calculateMinMax(key) {
+    try {
+      const values = Array.from(this.afs.items).map(item => {
+        if (!item || !item.dataset || !item.dataset[key]) {
+          return null;
+        }
+        const value = parseFloat(item.dataset[key]);
+        return isNaN(value) ? null : value;
+      }).filter(value => value !== null);
+      if (values.length === 0) {
+        return {
+          min: 0,
+          max: 100
+        };
+      }
+      return {
+        min: Math.min(...values),
+        max: Math.max(...values)
+      };
+    } catch (error) {
+      this.afs.logger.error('Error calculating range:', error);
+      return {
+        min: 0,
+        max: 100
+      };
+    }
+  }
+
+  /**
+   * Create input elements
+   * @private
+   */
+  /**
+  * Create input elements
+  * @private
+  */
+  createInputElements(label) {
+    const container = document.createElement('div');
+    container.className = 'afs-input-range-container';
+    if (label) {
+      const labelElement = document.createElement('div');
+      labelElement.className = 'afs-input-range-label';
+      labelElement.textContent = label;
+      container.appendChild(labelElement);
+    }
+
+    // Min input wrapper
+    const minWrapper = document.createElement('div');
+    minWrapper.className = 'afs-input-wrapper';
+    const minLabel = document.createElement('label');
+    minLabel.textContent = 'Min';
+    minLabel.className = 'afs-input-label';
+    const minInput = document.createElement('input');
+    minInput.type = 'number';
+    minInput.className = 'afs-input min';
+    minWrapper.appendChild(minLabel);
+    minWrapper.appendChild(minInput);
+
+    // Max input wrapper
+    const maxWrapper = document.createElement('div');
+    maxWrapper.className = 'afs-input-wrapper';
+    const maxLabel = document.createElement('label');
+    maxLabel.textContent = 'Max';
+    maxLabel.className = 'afs-input-label';
+    const maxInput = document.createElement('input');
+    maxInput.type = 'number';
+    maxInput.className = 'afs-input max';
+    maxWrapper.appendChild(maxLabel);
+    maxWrapper.appendChild(maxInput);
+    container.appendChild(minWrapper);
+    container.appendChild(maxWrapper);
+    return {
+      container,
+      minInput,
+      maxInput
+    };
+  }
+
+  /**
+   * Initialize input range state
+   * @private
+   */
+  initializeState(min, max, step) {
+    return {
+      min,
+      max,
+      step,
+      currentMin: min,
+      currentMax: max
+    };
+  }
+
+  /**
+   * Append elements to container
+   * @private
+   */
+  appendElements(container, elements) {
+    container.appendChild(elements.container);
+  }
+
+  /**
+   * Setup event handlers
+   * @private
+   */
+  setupEventHandlers(elements, state, key) {
+    const {
+      minInput,
+      maxInput
+    } = elements;
+    const handleInputChange = debounce(() => {
+      const minValue = parseFloat(minInput.value);
+      const maxValue = parseFloat(maxInput.value);
+      if (!isNaN(minValue) && !isNaN(maxValue)) {
+        state.currentMin = Math.max(state.min, Math.min(maxValue, minValue));
+        state.currentMax = Math.min(state.max, Math.max(minValue, maxValue));
+        this.updateInputUI(key);
+        this.applyFilter(key);
+      }
+    }, 300);
+    minInput.addEventListener('input', handleInputChange);
+    maxInput.addEventListener('input', handleInputChange);
+  }
+
+  /**
+   * Update input UI
+   * @private
+   */
+  updateInputUI(key) {
+    try {
+      const {
+        state,
+        elements
+      } = this.activeRanges.get(key);
+      const {
+        minInput,
+        maxInput
+      } = elements;
+
+      // Set constraints
+      minInput.min = state.min;
+      minInput.max = state.max;
+      minInput.step = state.step;
+      maxInput.min = state.min;
+      maxInput.max = state.max;
+      maxInput.step = state.step;
+
+      // Set current values
+      minInput.value = state.currentMin;
+      maxInput.value = state.currentMax;
+    } catch (error) {
+      this.afs.logger.error('Error updating input UI:', error);
+    }
+  }
+
+  /**
+   * Apply filter
+   * @private
+   */
+  applyFilter(key) {
+    this.afs.logger.info(`Applying input filter for ${key}`);
+    const {
+      state
+    } = this.activeRanges.get(key);
+    this.afs.items.forEach(item => {
+      try {
+        if (!item || !item.dataset || !item.dataset[key]) {
+          this.afs.hideItem(item);
+          return;
+        }
+        const itemValue = parseFloat(item.dataset[key]);
+        if (isNaN(itemValue)) {
+          this.afs.hideItem(item);
+          return;
+        }
+        if (itemValue >= state.currentMin && itemValue <= state.currentMax) {
+          this.afs.showItem(item);
+        } else {
+          this.afs.hideItem(item);
+        }
+      } catch (error) {
+        this.afs.logger.error('Error filtering item:', error);
+        this.afs.hideItem(item);
+      }
+    });
+    this.afs.updateCounter();
+    this.afs.urlManager.updateURL();
+    this.afs.emit('inputRangeFilter', {
+      key,
+      min: state.currentMin,
+      max: state.currentMax
+    });
+  }
+
+  /**
+   * Get current range values
+   * @param {string} key - Range key
+   * @returns {Object} Current range values
+   */
+  getRange(key) {
+    const range = this.activeRanges.get(key);
+    if (!range) return null;
+    return {
+      min: range.state.currentMin,
+      max: range.state.currentMax
+    };
+  }
+
+  /**
+   * Set range values
+   * @param {string} key - Range key
+   * @param {number} min - Minimum value
+   * @param {number} max - Maximum value
+   */
+  setRange(key, min, max) {
+    const range = this.activeRanges.get(key);
+    if (!range) return;
+    range.state.currentMin = min;
+    range.state.currentMax = max;
+    this.updateInputUI(key);
+    this.applyFilter(key);
+  }
+
+  /**
+   * Remove input range
+   * @param {string} key - Range key
+   */
+  removeInputRange(key) {
+    const range = this.activeRanges.get(key);
+    if (!range) return;
+    range.elements.container.remove();
+    this.activeRanges.delete(key);
+    this.afs.logger.info(`Input range removed for ${key}`);
+  }
+}
+
 /**
  * @fileoverview Search functionality for AFS
  */
@@ -3172,6 +3577,9 @@ class URLManager {
       currentPage,
       itemsPerPage
     } = state.pagination;
+    if (!this.afs.options.get('pagination.enabled')) {
+      return;
+    }
     if (currentPage > 1) {
       params.set('page', currentPage.toString());
     }
@@ -3464,6 +3872,7 @@ class RangeFilter {
   constructor(afs) {
     this.afs = afs;
     this.activeRanges = new Map();
+    this.options = this.afs.options.get("slider");
     if (!this.afs.styleManager) {
       this.afs.styleManager = new StyleManager(this.afs.options);
     }
@@ -3578,14 +3987,14 @@ class RangeFilter {
    */
   createSliderElements(histogramData, sliderUiOptions) {
     const styles = this.afs.options.get("styles") || this.afs.styleManager.defaultStyles;
-    const sliderStyles = styles.slider || this.afs.styleManager.defaultStyles.slider;
     const colors = styles.colors || this.afs.styleManager.defaultStyles.colors;
+    const sliderOptions = this.afs.options.get("slider") || {};
     const container = document.createElement("div");
-    container.className = "price-range-container";
+    container.className = "afs-range-container";
     const slider = document.createElement("div");
-    slider.className = sliderStyles.class;
+    slider.className = sliderOptions.containerClass;
     const track = document.createElement("div");
-    track.className = sliderStyles.trackClass;
+    track.className = sliderOptions.trackClass;
 
     // Only add histogram if enabled in the slider-specific options
     if (sliderUiOptions?.showHistogram && histogramData?.counts?.length > 0) {
@@ -3593,15 +4002,15 @@ class RangeFilter {
       slider.appendChild(histogram);
     }
     const selectedRange = document.createElement("div");
-    selectedRange.className = sliderStyles.selectedClass;
+    selectedRange.className = sliderOptions.selectedClass;
     const minThumb = document.createElement("div");
-    minThumb.className = sliderStyles.thumbClass;
+    minThumb.className = sliderOptions.thumbClass;
     const maxThumb = document.createElement("div");
-    maxThumb.className = sliderStyles.thumbClass;
+    maxThumb.className = sliderOptions.thumbClass;
     const minValue = document.createElement("div");
-    minValue.className = sliderStyles.valueClass;
+    minValue.className = sliderOptions.valueClass;
     const maxValue = document.createElement("div");
-    maxValue.className = sliderStyles.valueClass;
+    maxValue.className = sliderOptions.valueClass;
 
     // Build the slider
     slider.appendChild(track);
@@ -4321,7 +4730,7 @@ class DateFilter {
  */
 
 // Version
-const VERSION = '1.0.7';
+const VERSION = '1.0.9';
 class AFS extends EventEmitter {
   /**
    * @param {Object} options - Configuration options
@@ -4384,6 +4793,7 @@ class AFS extends EventEmitter {
     this.urlManager = new URLManager(this);
     this.dateFilter = new DateFilter(this);
     this.pagination = new Pagination(this);
+    this.inputRangeFilter = new InputRangeFilter(this);
 
     // Apply styles
     this.styleManager.applyStyles();