mtrl 0.2.3 → 0.2.5

package/src/components/slider/features/ui.ts

@@ -1,5 +1,4 @@
-// src/components/slider/features/ui.ts - Updated track update methods
-import { SLIDER_ORIENTATIONS } from '../constants';
+// src/components/slider/features/ui.ts
 import { SliderConfig } from '../types';
 
 /**
@@ -10,77 +9,83 @@ import { SliderConfig } from '../types';
  * @returns UI update helper methods
  */
 export const createUiHelpers = (config: SliderConfig, state) => {
-  // Make sure state.component.structure exists
-  if (!state.component || !state.component.structure) {
+  // Return empty implementations if component structure is missing
+  if (!state.component?.structure) {
     console.error('Cannot create UI helpers: component structure is missing');
-    return {
-      getPercentage: () => 0,
-      getValueFromPosition: () => 0,
-      roundToStep: (value) => value,
-      clamp: (value, min, max) => Math.min(Math.max(value, min), max),
-      setThumbPosition: () => {},
-      updateActiveTrack: () => {},
-      updateStartTrack: () => {},
-      updateRemainingTrack: () => {},
-      updateThumbPositions: () => {},
-      updateValueBubbles: () => {},
-      showValueBubble: () => {},
-      generateTicks: () => {},
-      updateTicks: () => {},
-      updateUi: () => {}
-    };
+    return Object.fromEntries(['getPercentage', 'getValueFromPosition', 'roundToStep', 
+      'clamp', 'setThumbPosition', 'updateActiveTrack', 'updateStartTrack', 
+      'updateRemainingTrack', 'updateThumbPositions', 'updateValueBubbles', 
+      'showValueBubble', 'generateTicks', 'updateTicks', 'updateUi']
+      .map(method => [method, method === 'clamp' ? (v, min, max) => Math.min(Math.max(v, min), max) : 
+                              method === 'roundToStep' ? v => v : 
+                              method === 'getPercentage' || method === 'getValueFromPosition' ? () => 0 : 
+                              () => {}]));
   }
   
   const {
-    track,
-    activeTrack,
-    startTrack,
-    remainingTrack,
-    thumb,
-    valueBubble,
-    secondThumb,
-    secondValueBubble
+    track, activeTrack, startTrack, remainingTrack, thumb, 
+    valueBubble, secondThumb, secondValueBubble, ticksContainer
   } = state.component.structure;
   
   /**
    * Calculates percentage position for a value
-   * @param value Value to convert to percentage
-   * @returns Percentage position (0-100)
    */
   const getPercentage = (value) => {
     const range = state.max - state.min;
-    if (range === 0) return 0;
-    return ((value - state.min) / range) * 100;
+    return range === 0 ? 0 : ((value - state.min) / range) * 100;
+  };
+  
+  /**
+   * Gets track dimensions and constraints for positioning calculations
+   */
+  const getTrackDimensions = () => {
+    if (!track || !thumb) return null;
+    
+    const thumbRect = thumb.getBoundingClientRect();
+    const trackRect = track.getBoundingClientRect();
+    const thumbSize = thumbRect.width || 20;
+    const trackSize = trackRect.width;
+    
+    const edgeConstraint = (thumbSize / 2) / trackSize * 100;
+    const paddingPercent = (8 / trackSize) * 100; // 8px padding
+    
+    return { thumbSize, trackSize, edgeConstraint, paddingPercent };
+  };
+  
+  /**
+   * Map value percentage to visual position with edge constraints
+   */
+  const mapValueToVisualPercent = (valuePercent, edgeConstraint) => {
+    const minEdge = edgeConstraint;
+    const maxEdge = 100 - edgeConstraint;
+    const visualRange = maxEdge - minEdge;
+    
+    if (valuePercent <= 0) return minEdge;
+    if (valuePercent >= 100) return maxEdge;
+    return minEdge + (valuePercent / 100) * visualRange;
   };
   
   /**
    * Gets slider value from a position on the track
-   * @param position Screen coordinate (clientX/clientY)
-   * @param vertical Whether slider is vertical
-   * @returns Calculated value
    */
-  const getValueFromPosition = (position, vertical = false) => {
+  const getValueFromPosition = (position) => {
     if (!track) return state.min;
     
     try {
       const trackRect = track.getBoundingClientRect();
       const range = state.max - state.min;
       
-      if (vertical) {
-        const trackHeight = trackRect.height;
-        // For vertical sliders, 0% is at the bottom, 100% at the top
-        const percentageFromBottom = 1 - ((position - trackRect.top) / trackHeight);
-        // Clamp percentage between 0 and 1
-        const clampedPercentage = Math.max(0, Math.min(1, percentageFromBottom));
-        return state.min + clampedPercentage * range;
-      } else {
-        const trackWidth = trackRect.width;
-        // For horizontal sliders, 0% is at the left, 100% at the right
-        const percentageFromLeft = (position - trackRect.left) / trackWidth;
-        // Clamp percentage between 0 and 1
-        const clampedPercentage = Math.max(0, Math.min(1, percentageFromLeft));
-        return state.min + clampedPercentage * range;
-      }
+      const thumbRect = thumb.getBoundingClientRect();
+      const thumbWidth = thumbRect.width || 20;
+      
+      const leftEdge = trackRect.left + (thumbWidth / 2);
+      const rightEdge = trackRect.right - (thumbWidth / 2);
+      const effectiveWidth = rightEdge - leftEdge;
+      
+      const adjustedPosition = Math.max(leftEdge, Math.min(rightEdge, position));
+      const percentageFromLeft = (adjustedPosition - leftEdge) / effectiveWidth;
+      
+      return state.min + percentageFromLeft * range;
     } catch (error) {
       console.warn('Error calculating value from position:', error);
       return state.min;
@@ -89,8 +94,6 @@ export const createUiHelpers = (config: SliderConfig, state) => {
   
   /**
    * Rounds a value to the nearest step
-   * @param value Value to round
-   * @returns Rounded value
    */
   const roundToStep = (value) => {
     const step = state.step;
@@ -102,208 +105,130 @@ export const createUiHelpers = (config: SliderConfig, state) => {
   
   /**
    * Clamps a value between min and max
-   * @param value Value to clamp
-   * @param min Minimum allowed value
-   * @param max Maximum allowed value
-   * @returns Clamped value
    */
   const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
   
   /**
-   * Sets thumb position based on a value percentage
-   * @param thumbElement Thumb element to position
-   * @param valueBubbleElement Value bubble element to position
-   * @param valuePercent Percentage position (0-100)
+   * Sets thumb position based on a value percentage with proper edge mapping
    */
-  const setThumbPosition = (thumbElement, valueBubbleElement, valuePercent) => {
-    if (!thumbElement) return;
-    
-    if (config.orientation === SLIDER_ORIENTATIONS.VERTICAL) {
-      // Fix for vertical slider - position from bottom using absolute positioning
-      thumbElement.style.bottom = `${valuePercent}%`;
-      thumbElement.style.left = '50%'; // Keep it centered horizontally
-      thumbElement.style.top = 'auto'; // Clear top property to prevent conflicts
-      
-      if (valueBubbleElement) {
-        valueBubbleElement.style.bottom = `${valuePercent}%`;
-        valueBubbleElement.style.top = 'auto';
-      }
-    } else {
-      thumbElement.style.left = `${valuePercent}%`;
-      if (valueBubbleElement) {
-        valueBubbleElement.style.left = `${valuePercent}%`;
-      }
+  const setThumbPosition = (thumbElement, bubbleElement, valuePercent) => {
+    if (!thumbElement || !track) return;
+    
+    const dims = getTrackDimensions();
+    if (!dims) return;
+    
+    const { thumbSize, trackSize } = dims;
+    const edgeConstraint = (thumbSize / 2) / trackSize * 100;
+    const adjustedPercent = mapValueToVisualPercent(valuePercent, edgeConstraint);
+    
+    thumbElement.style.left = `${adjustedPercent}%`;
+    thumbElement.style.transform = 'translate(-50%, -50%)';
+    
+    if (bubbleElement) {
+      bubbleElement.style.left = `${adjustedPercent}%`;
+      bubbleElement.style.transform = 'translateX(-50%)';
     }
   };
-  
-
 
-/**
- * Updates start track styles (before the first thumb for range slider)
- * This method now includes padding adjustments in the calculation
- */
-const updateStartTrack = () => {
-  if (!startTrack) return;
-  
-  if (config.range && state.secondValue !== null) {
-    // For range slider, calculate the track from start to first thumb
-    const lowerValue = Math.min(state.value, state.secondValue);
-    const lowerPercent = getPercentage(lowerValue);
+  /**
+   * Updates start track styles
+   */
+  const updateStartTrack = () => {
+    if (!startTrack || !track || !thumb) return;
     
-    // Get track width for pixel calculations 
-    const trackRect = track.getBoundingClientRect();
-    const isVertical = config.orientation === SLIDER_ORIENTATIONS.VERTICAL;
-    const trackSize = isVertical ? trackRect.height : trackRect.width;
+    const dims = getTrackDimensions();
+    if (!dims) return;
     
-    // Calculate width with adjustment for thumb spacing - subtract 8px equivalent
-    const paddingAdjustment = 8; // 8px padding
-    const paddingPercent = (paddingAdjustment / trackSize) * 100;
+    const { thumbSize, trackSize, paddingPercent } = dims;
     
-    if (isVertical) {
-      startTrack.style.display = 'block';
-      startTrack.style.height = `${Math.max(0, lowerPercent - paddingPercent)}%`;
-      startTrack.style.bottom = '0';
-      startTrack.style.top = 'auto';
-      startTrack.style.width = '100%';
-      startTrack.style.left = '0';
-    } else {
+    if (config.range && state.secondValue !== null) {
+      const lowerValue = Math.min(state.value, state.secondValue);
+      const lowerPercent = getPercentage(lowerValue);
+      
+      const edgeConstraint = (thumbSize / 2) / trackSize * 100;
+      const adjustedPercent = mapValueToVisualPercent(lowerPercent, edgeConstraint);
+      const finalPercent = Math.max(0, adjustedPercent - paddingPercent);
+      
       startTrack.style.display = 'block';
-      startTrack.style.width = `${Math.max(0, lowerPercent - paddingPercent)}%`;
+      startTrack.style.width = `${finalPercent}%`;
       startTrack.style.left = '0';
       startTrack.style.height = '100%';
+    } else {
+      startTrack.style.display = 'none';
     }
-  } else {
-    // For single thumb slider, no start track needed
-    startTrack.style.display = 'none';
-  }
-};
+  };
 
-/**
- * Updates active track styles - with padding adjustments
- */
-const updateActiveTrack = () => {
-  if (!activeTrack) return;
-  
-  // Get track width for pixel calculations
-  const trackRect = track.getBoundingClientRect();
-  const isVertical = config.orientation === SLIDER_ORIENTATIONS.VERTICAL;
-  const trackSize = isVertical ? trackRect.height : trackRect.width;
-  
-  // Calculate padding adjustment
-  const paddingAdjustment = 8; // 8px padding
-  const paddingPercent = (paddingAdjustment / trackSize) * 100;
-  
-  if (config.range && state.secondValue !== null) {
-    // Range slider (two thumbs)
-    const lowerValue = Math.min(state.value, state.secondValue);
-    const higherValue = Math.max(state.value, state.secondValue);
-    const lowerPercent = getPercentage(lowerValue);
-    const higherPercent = getPercentage(higherValue);
-    
-    // Adjust positions and width to account for spacing
-    let adjustedLowerPercent = lowerPercent;
-    let adjustedHigherPercent = higherPercent;
-    
-    if (higherPercent - lowerPercent > paddingPercent * 2) {
-      // If there's enough space, add padding to both sides
-      adjustedLowerPercent = lowerPercent + paddingPercent;
-      adjustedHigherPercent = higherPercent - paddingPercent;
-    }
+  /**
+   * Updates active track styles
+   */
+  const updateActiveTrack = () => {
+    if (!activeTrack || !track || !thumb) return;
     
-    const trackLength = Math.max(0, adjustedHigherPercent - adjustedLowerPercent);
+    const dims = getTrackDimensions();
+    if (!dims) return;
     
-    if (isVertical) {
-      activeTrack.style.display = 'block';
-      activeTrack.style.height = `${trackLength}%`;
-      activeTrack.style.bottom = `${adjustedLowerPercent}%`;
-      activeTrack.style.top = 'auto';
-      activeTrack.style.width = '100%';
-    } else {
+    const { thumbSize, trackSize, paddingPercent } = dims;
+    const edgeConstraint = (thumbSize / 2) / trackSize * 100;
+    
+    if (config.range && state.secondValue !== null) {
+      // Range slider (two thumbs)
+      const lowerValue = Math.min(state.value, state.secondValue);
+      const higherValue = Math.max(state.value, state.secondValue);
+      const lowerPercent = getPercentage(lowerValue);
+      const higherPercent = getPercentage(higherValue);
+      
+      const adjustedLower = mapValueToVisualPercent(lowerPercent, edgeConstraint) + paddingPercent;
+      const adjustedHigher = mapValueToVisualPercent(higherPercent, edgeConstraint) - paddingPercent;
+      
+      let trackLength = Math.max(0, adjustedHigher - adjustedLower);
+      if (higherPercent - lowerPercent < paddingPercent * 2) {
+        trackLength = Math.max(0, higherPercent - lowerPercent);
+      }
+      
       activeTrack.style.display = 'block';
       activeTrack.style.width = `${trackLength}%`;
-      activeTrack.style.left = `${adjustedLowerPercent}%`;
+      activeTrack.style.left = `${adjustedLower}%`;
       activeTrack.style.height = '100%';
-    }
-  } else {
-    // Single thumb slider
-    const percent = getPercentage(state.value);
-    
-    // For single slider, adjust for left padding
-    const adjustedWidth = Math.max(0, percent - paddingPercent);
-    
-    if (isVertical) {
-      activeTrack.style.display = 'block';
-      activeTrack.style.height = `${adjustedWidth}%`;
-      activeTrack.style.bottom = '0';
-      activeTrack.style.top = 'auto';
-      activeTrack.style.width = '100%';
     } else {
+      // Single thumb slider
+      const valuePercent = getPercentage(state.value);
+      const adjustedPercent = mapValueToVisualPercent(valuePercent, edgeConstraint);
+      const adjustedWidth = Math.max(0, adjustedPercent - paddingPercent);
+      
       activeTrack.style.display = 'block';
       activeTrack.style.width = `${adjustedWidth}%`;
       activeTrack.style.left = '0';
       activeTrack.style.height = '100%';
     }
-  }
-};
+  };
 
-/**
- * Updates remaining track styles - with padding adjustments
- */
-const updateRemainingTrack = () => {
-  if (!remainingTrack) return;
-  
-  // Get track width for pixel calculations
-  const trackRect = track.getBoundingClientRect();
-  const isVertical = config.orientation === SLIDER_ORIENTATIONS.VERTICAL;
-  const trackSize = isVertical ? trackRect.height : trackRect.width;
-  
-  // Calculate padding adjustment
-  const paddingAdjustment = 8; // 8px padding
-  const paddingPercent = (paddingAdjustment / trackSize) * 100;
-  
-  if (config.range && state.secondValue !== null) {
-    // Range slider (two thumbs)
-    const higherValue = Math.max(state.value, state.secondValue);
-    const higherPercent = getPercentage(higherValue);
-    
-    // Adjust for right padding
-    const adjustedPercent = higherPercent + paddingPercent;
-    const adjustedWidth = Math.max(0, 100 - adjustedPercent);
-    
-    if (isVertical) {
-      remainingTrack.style.display = 'block';
-      remainingTrack.style.height = `${adjustedWidth}%`;
-      remainingTrack.style.bottom = `${adjustedPercent}%`;
-      remainingTrack.style.top = 'auto';
-      remainingTrack.style.width = '100%';
-    } else {
-      remainingTrack.style.display = 'block';
-      remainingTrack.style.width = `${adjustedWidth}%`;
-      remainingTrack.style.left = `${adjustedPercent}%`;
-      remainingTrack.style.height = '100%';
-    }
-  } else {
-    // Single thumb slider
-    const percent = getPercentage(state.value);
+  /**
+   * Updates remaining track styles
+   */
+  const updateRemainingTrack = () => {
+    if (!remainingTrack || !track || !thumb) return;
     
-    // Adjust for right padding
-    const adjustedPercent = percent + paddingPercent;
-    const adjustedWidth = Math.max(0, 100 - adjustedPercent);
+    const dims = getTrackDimensions();
+    if (!dims) return;
     
-    if (isVertical) {
-      remainingTrack.style.display = 'block';
-      remainingTrack.style.height = `${adjustedWidth}%`;
-      remainingTrack.style.bottom = `${adjustedPercent}%`;
-      remainingTrack.style.top = 'auto';
-      remainingTrack.style.width = '100%';
-    } else {
-      remainingTrack.style.display = 'block';
-      remainingTrack.style.width = `${adjustedWidth}%`;
-      remainingTrack.style.left = `${adjustedPercent}%`;
-      remainingTrack.style.height = '100%';
-    }
-  }
-};
+    const { thumbSize, trackSize, paddingPercent } = dims;
+    const edgeConstraint = (thumbSize / 2) / trackSize * 100;
+    
+    // Find the highest thumb value
+    const highValue = config.range && state.secondValue !== null ? 
+      Math.max(state.value, state.secondValue) : state.value;
+    
+    const valuePercent = getPercentage(highValue);
+    
+    // Map percentage to visual range
+    const adjustedPercent = mapValueToVisualPercent(valuePercent, edgeConstraint) + paddingPercent;
+    const remainingSize = Math.max(0, 100 - adjustedPercent);
+    
+    remainingTrack.style.display = 'block';
+    remainingTrack.style.width = `${remainingSize}%`;
+    remainingTrack.style.left = `${adjustedPercent}%`;
+    remainingTrack.style.height = '100%';
+  };
   
   /**
    * Updates thumb positions
@@ -336,56 +261,48 @@ const updateRemainingTrack = () => {
     
     // Format the values
     const formatter = config.valueFormatter || (value => value.toString());
-    const formattedValue = formatter(state.value);
-    
-    // Update main value bubble
-    valueBubble.textContent = formattedValue;
     
-    // Update second value bubble if range slider
+    // Update main and second value bubble if needed
+    valueBubble.textContent = formatter(state.value);
     if (config.range && secondValueBubble && state.secondValue !== null) {
-      const formattedSecondValue = formatter(state.secondValue);
-      secondValueBubble.textContent = formattedSecondValue;
+      secondValueBubble.textContent = formatter(state.secondValue);
     }
   };
   
   /**
    * Shows or hides value bubble
-   * @param bubbleElement Value bubble element
-   * @param show Whether to show the bubble
    */
   const showValueBubble = (bubbleElement, show) => {
     if (!bubbleElement || !config.showValue) return;
     
-    if (show) {
-      bubbleElement.classList.add(`${state.component.getClass('slider-value')}--visible`);
-    } else {
-      bubbleElement.classList.remove(`${state.component.getClass('slider-value')}--visible`);
-    }
+    const visibleClass = `${state.component.getClass('slider-value')}--visible`;
+    bubbleElement.classList[show ? 'add' : 'remove'](visibleClass);
   };
   
   /**
-   * Generates tick marks and labels
+   * Generates tick marks
    */
   const generateTicks = () => {
-    // Remove existing ticks
-    state.ticks.forEach(tick => {
-      if (tick.parentNode) {
-        tick.parentNode.removeChild(tick);
-      }
-    });
+    if (!ticksContainer) {
+      console.warn('Ticks container not found in component structure');
+      return;
+    }
     
-    state.tickLabels.forEach(label => {
-      if (label.parentNode) {
-        label.parentNode.removeChild(label);
-      }
-    });
+    // Clear existing ticks
+    const sliderElement = state.component.element;
+    sliderElement.querySelectorAll(`.${state.component.getClass('slider-tick')}`)
+      .forEach(tick => tick.parentNode.removeChild(tick));
     
+    while (ticksContainer.firstChild) {
+      ticksContainer.removeChild(ticksContainer.firstChild);
+    }
+    
+    // Reset ticks array
     state.ticks = [];
-    state.tickLabels = [];
     
-    if (!config.ticks && !config.tickLabels) return;
+    if (!config.ticks) return;
     
-    // Generate new ticks
+    // Generate tick values
     const numSteps = Math.floor((state.max - state.min) / state.step);
     const tickValues = [];
     
@@ -401,58 +318,41 @@ const updateRemainingTrack = () => {
       tickValues.push(state.max);
     }
     
+    // CSS classes
+    const activeClass = `${state.component.getClass('slider-tick')}--active`;
+    const inactiveClass = `${state.component.getClass('slider-tick')}--inactive`;
+    const hiddenClass = `${state.component.getClass('slider-tick')}--hidden`;
+    const tickClass = state.component.getClass('slider-tick');
+    
     // Create ticks
     tickValues.forEach(value => {
+      const percent = getPercentage(value);
+      
+      // Create tick mark if enabled
       if (config.ticks) {
         const tick = document.createElement('div');
-        tick.classList.add(state.component.getClass('slider-tick'));
+        tick.classList.add(tickClass);
         
         // Position tick
-        const percent = getPercentage(value);
-        if (config.orientation === SLIDER_ORIENTATIONS.VERTICAL) {
-          tick.style.bottom = `${percent}%`;
-        } else {
-          tick.style.left = `${percent}%`;
-        }
+        tick.style.left = `${percent}%`;
+        
+        // Check if this tick should be hidden (matches exactly a selected value)
+        const isExactlySelected = value === state.value || 
+          (config.range && state.secondValue !== null && value === state.secondValue);
         
-        // Set active class if value is in active range
-        if (config.range && state.secondValue !== null) {
+        if (isExactlySelected) {
+          tick.classList.add(hiddenClass);
+        } else if (config.range && state.secondValue !== null) {
           const lowerValue = Math.min(state.value, state.secondValue);
           const higherValue = Math.max(state.value, state.secondValue);
           
-          if (value >= lowerValue && value <= higherValue) {
-            tick.classList.add(`${state.component.getClass('slider-tick')}--active`);
-          }
-        } else if (value <= state.value) {
-          tick.classList.add(`${state.component.getClass('slider-tick')}--active`);
-        }
-        
-        state.component.element.appendChild(tick);
-        state.ticks.push(tick);
-      }
-      
-      if (config.tickLabels) {
-        const label = document.createElement('div');
-        label.classList.add(state.component.getClass('slider-label'));
-        
-        // Position label
-        const percent = getPercentage(value);
-        if (config.orientation === SLIDER_ORIENTATIONS.VERTICAL) {
-          label.style.bottom = `${percent}%`;
-        } else {
-          label.style.left = `${percent}%`;
-        }
-        
-        // Set label text
-        if (Array.isArray(config.tickLabels) && config.tickLabels[tickValues.indexOf(value)]) {
-          label.textContent = config.tickLabels[tickValues.indexOf(value)];
+          tick.classList.add(value >= lowerValue && value <= higherValue ? activeClass : inactiveClass);
         } else {
-          const formatter = config.valueFormatter || (value => value.toString());
-          label.textContent = formatter(value);
+          tick.classList.add(value <= state.value ? activeClass : inactiveClass);
         }
         
-        state.component.element.appendChild(label);
-        state.tickLabels.push(label);
+        ticksContainer.appendChild(tick);
+        state.ticks.push(tick);
       }
     });
   };
@@ -461,26 +361,47 @@ const updateRemainingTrack = () => {
    * Updates active state of tick marks
    */
   const updateTicks = () => {
+    if (!state.ticks || state.ticks.length === 0) return;
+    
+    const activeClass = `${state.component.getClass('slider-tick')}--active`;
+    const inactiveClass = `${state.component.getClass('slider-tick')}--inactive`;
+    const hiddenClass = `${state.component.getClass('slider-tick')}--hidden`;
+    
     // Update active ticks based on current value
     state.ticks.forEach((tick, index) => {
+      // Calculate the value for this tick based on its index
       const tickValue = state.min + (index * state.step);
       
-      if (config.range && state.secondValue !== null) {
-        // Range slider - ticks between the two values should be active
+      // First, reset visibility
+      tick.classList.remove(hiddenClass);
+      
+      // Check if this tick should be hidden (matches exactly a selected value)
+      const isExactlySelected = tickValue === state.value || 
+        (config.range && state.secondValue !== null && tickValue === state.secondValue);
+      
+      if (isExactlySelected) {
+        // Hide this tick as it exactly matches a selected value
+        tick.classList.add(hiddenClass);
+      } else if (config.range && state.secondValue !== null) {
+        // Range slider - ticks between values should be active
         const lowerValue = Math.min(state.value, state.secondValue);
         const higherValue = Math.max(state.value, state.secondValue);
         
         if (tickValue >= lowerValue && tickValue <= higherValue) {
-          tick.classList.add(`${state.component.getClass('slider-tick')}--active`);
+          tick.classList.add(activeClass);
+          tick.classList.remove(inactiveClass);
         } else {
-          tick.classList.remove(`${state.component.getClass('slider-tick')}--active`);
+          tick.classList.remove(activeClass);
+          tick.classList.add(inactiveClass);
         }
       } else {
-        // Single slider - ticks below or equal to value should be active
+        // Single slider - ticks below value should be active
         if (tickValue <= state.value) {
-          tick.classList.add(`${state.component.getClass('slider-tick')}--active`);
+          tick.classList.add(activeClass);
+          tick.classList.remove(inactiveClass);
         } else {
-          tick.classList.remove(`${state.component.getClass('slider-tick')}--active`);
+          tick.classList.remove(activeClass);
+          tick.classList.add(inactiveClass);
         }
       }
     });
@@ -491,7 +412,7 @@ const updateRemainingTrack = () => {
    */
   const updateUi = () => {
     updateThumbPositions();
-    updateStartTrack(); // Call BEFORE updateActiveTrack
+    updateStartTrack();
     updateActiveTrack();
     updateRemainingTrack();
     updateValueBubbles();