From a1b145094f0120d116718fb127a80858a7b9f15e Mon Sep 17 00:00:00 2001
From: lorka1 <lorena126os@gmail.com>
Date: Thu, 9 Jan 2025 13:01:32 +0100
Subject: [PATCH 1/4] chore(range, slider): add bubble for value, fix width
 span of components

---
 .../demo/src/FormFieldDemos/RangeDemo.svelte  |  2 +-
 .../demo/src/FormFieldDemos/SliderDemo.svelte | 17 ++--
 .../lib/src/form-fields/range/range.wc.pcss   | 63 ++++++++++---
 .../lib/src/form-fields/range/range.wc.svelte | 90 +++++++++++++++----
 .../lib/src/form-fields/slider/slider.wc.pcss | 41 +++++++--
 .../src/form-fields/slider/slider.wc.svelte   | 70 ++++++++++++---
 6 files changed, 226 insertions(+), 57 deletions(-)

diff --git a/packages/demo/src/FormFieldDemos/RangeDemo.svelte b/packages/demo/src/FormFieldDemos/RangeDemo.svelte
index 69c7a8ea..8ab160ac 100644
--- a/packages/demo/src/FormFieldDemos/RangeDemo.svelte
+++ b/packages/demo/src/FormFieldDemos/RangeDemo.svelte
@@ -15,4 +15,4 @@
   <jp-range label="range"></jp-range>
 
   <button type="submit">submit</button>
-</form>
+</form>
\ No newline at end of file
diff --git a/packages/demo/src/FormFieldDemos/SliderDemo.svelte b/packages/demo/src/FormFieldDemos/SliderDemo.svelte
index 8d890d85..3810d834 100644
--- a/packages/demo/src/FormFieldDemos/SliderDemo.svelte
+++ b/packages/demo/src/FormFieldDemos/SliderDemo.svelte
@@ -4,14 +4,17 @@
 </script>
 
 <form>
+  <jp-slider showValue=true/>
+  <jp-slider label="slider" showValue=true />
+  <jp-slider label="slider disabled" disabled="true" showValue=true />
+  <jp-slider label="slider required" required="true" showValue=true />
+  <jp-slider label="slider max" max="70" showValue=true />
+  <jp-slider label="slider min" min="20" showValue=true />
+  <jp-slider label="slider step" step="10" showValue=true />
+  <jp-slider label="slider discrete" discrete="true" showValue=true />
+  <jp-slider />
+  <jp-slider />
   <jp-slider />
-  <jp-slider label="slider" />
-  <jp-slider label="slider disabled" disabled="true" />
-  <jp-slider label="slider required" required="true" />
-  <jp-slider label="slider max" max="70" />
-  <jp-slider label="slider min" min="20" />
-  <jp-slider label="slider step" step="10" />
-  <jp-slider label="slider discrele" discrete="true" />
 
   <button type="submit">submit</button>
 </form>
diff --git a/packages/lib/src/form-fields/range/range.wc.pcss b/packages/lib/src/form-fields/range/range.wc.pcss
index ffeed4ef..f949032c 100644
--- a/packages/lib/src/form-fields/range/range.wc.pcss
+++ b/packages/lib/src/form-fields/range/range.wc.pcss
@@ -1,7 +1,7 @@
 .jp-range {
   &-slider {
     position: relative;
-    min-width: 300px;
+    width: 100%;
     height: 4px;
     background-color: #ccc;
     border-radius: 4px;
@@ -58,10 +58,41 @@
     }
 
     &-container {
+      width: 100%;
       text-align: left;
-      padding: 0 0 1rem 0.75rem;
-      margin: .5rem 0 .2rem 0;
-      font-size: .875rem;
+      margin-bottom: 15px;
+    }
+
+    &-bubble {
+      position: absolute;
+      top: -31px;
+      padding: 2.5px 6px;
+      color: white;
+      border-radius: 4px;
+      font-size: 12px;
+      white-space: nowrap;
+      transform: translateX(-50%);
+      background-color: var(--primary-color);
+  
+      &:after {
+        content: "";
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-left: 5px solid transparent;
+        border-right: 5px solid transparent;
+        border-top: 5px solid var(--primary-color);
+        bottom: -5px;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      &-disabled {
+      background-color: var(--background-secondary);
+    }
+    &-disabled:after {
+      border-top: 5px solid var(--background-secondary);
+    }
     }
   }
 
@@ -70,6 +101,10 @@
     background-color: var(--primary-color);
     top: 0;
     height: 100%;
+
+    &-disabled {
+      background-color: var(--background-disabled);
+    }
   }
 
   &-input {
@@ -100,17 +135,17 @@
       border-radius: 50%;
       background: var(--primary-color);
       transition: 0.2s ease-in-out;
+    }
+    &:hover {
+      &::-webkit-slider-thumb {
+        box-shadow: 0 0 0 10px rgba(131, 128, 127, 0.1);
+      }
+    }
 
-      &:hover {
-        box-shadow: 0 0 0 10px rgba(255, 85, 0, 0.1);
+    &:disabled {
+      &::-webkit-slider-thumb {
+        background-color: var(--background-secondary);
       }
     }
   }
-  &-value{
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    padding:0 1rem;
-    font-size: .875rem;
-  }
-}
+}
\ No newline at end of file
diff --git a/packages/lib/src/form-fields/range/range.wc.svelte b/packages/lib/src/form-fields/range/range.wc.svelte
index 84826da6..888b125f 100644
--- a/packages/lib/src/form-fields/range/range.wc.svelte
+++ b/packages/lib/src/form-fields/range/range.wc.svelte
@@ -16,7 +16,7 @@
 />
 
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher, onMount } from 'svelte';
   import './range.wc.pcss';
 
   export let disabled: boolean = false;
@@ -29,28 +29,47 @@
   export let discrete: boolean = true; //if true -> ticks, false -> smooth
   export let required = false;
   export let label = '';
-  export let showValue = false;
+  export let showValue: boolean = false;
   let internalValue = [min, max];
   export const getValue = () => internalValue;
-  export let startLabel = '';	
-  export let endLabel = '';
 
   const dispatch = createEventDispatcher();
+  let leftSlider: HTMLInputElement;
+  let leftBubble: HTMLDivElement;
+  let rightSlider: HTMLInputElement;
+  let rightBubble: HTMLDivElement;
 
   function handleRangeClick(event: MouseEvent) {
     const slider = event.currentTarget as HTMLElement;
     const rect = slider.getBoundingClientRect();
     const percentage = (event.clientX - rect.left) / rect.width;
-    const clickValue = Math.min(
-      Math.max(parseInt(min) + percentage * (parseInt(max) - parseInt(min)), min),
-      max
-    );
+    const clickValue = Math.min(Math.max(parseInt(min) + percentage * (parseInt(max) - parseInt(min)), min), max);
 
     const roundedValue = Math.round(clickValue / step) * step;
-    const index =
-      Math.abs(clickValue - internalValue[0]) <= Math.abs(clickValue - internalValue[1]) ? 0 : 1;
+    const index = Math.abs(clickValue - internalValue[0]) <= Math.abs(clickValue - internalValue[1]) ? 0 : 1;
     internalValue[index] = roundedValue;
   }
+  
+  function updateBubblePosition() {
+    if (!leftBubble || !leftSlider || !rightBubble || !rightSlider) return;
+    
+    const leftVal = internalValue[0];
+    const leftMin = parseFloat(leftSlider.min);
+    const leftMax = parseFloat(leftSlider.max);
+    const newLeftVal = Number(((leftVal - leftMin) * 100) / (leftMax - leftMin));
+    
+    leftBubble.style.left = `calc(${newLeftVal}% + (${8 - newLeftVal * 0.165}px))`;
+    leftBubble.style.transform = `translateX(-50%)`;
+
+    const rightVal = internalValue[1]
+    const rightMin = parseFloat(rightSlider.min);
+    const rightMax = parseFloat(rightSlider.max);
+    const newRightVal = Number(((rightVal - rightMin) * 100) / (rightMax - rightMin));
+    
+    rightBubble.style.left = `calc(${newRightVal}% + (${8 - newRightVal * 0.165}px))`;
+    rightBubble.style.transform = `translateX(-50%)`;
+
+  }
 
   $: low = Math.round(100 * ((internalValue[0] - min) / (max - min)));
   $: high = Math.round(100 * ((internalValue[1] - min) / (max - min)));
@@ -75,7 +94,17 @@
       internalValue = value;
     }
   }
+
+  $: {
+    internalValue;
+    updateBubblePosition();
+  }
+  
   $: displayLabel = required ? `${label} *` : label;
+
+  onMount(() => {
+    updateBubblePosition();
+  });
 </script>
 
 <div class="jp-range-slider-container">
@@ -83,6 +112,39 @@
     {@html displayLabel}
   {/if}
 </div>
+{#if showValue}
+<div class="jp-range-slider" on:click={handleRangeClick} style="margin-top: 45px;">
+  <div class="jp-range-slider-bubble" class:jp-range-slider-bubble-disabled={disabled} bind:this={leftBubble}>{internalValue[0]}</div>
+  <div class="jp-range-progress" class:jp-range-progress-disabled={disabled} style={`left: ${low}%; right: ${100 - high}%`}></div>
+  <input
+    type="range"
+    class="jp-range-input"
+    class:jp-range-input-disabled={disabled}
+    {disabled}
+    step={discrete ? step : 'any'}
+    {min}
+    {max}
+    id={id + '_min'}
+    name={name + '_min'}
+    bind:this={leftSlider}
+    bind:value={internalValue[0]}
+  />
+  <div class="jp-range-slider-bubble" class:jp-range-slider-bubble-disabled={disabled} bind:this={rightBubble}>{internalValue[1]}</div>
+  <input
+    type="range"
+    class="jp-range-input"
+    class:jp-range-input-disabled={disabled}
+    {disabled}
+    step={discrete ? step : 'any'}
+    {min}
+    {max}
+    id={id + '_max'}
+    name={name + '_max'}
+    bind:this={rightSlider}
+    bind:value={internalValue[1]}
+  />
+</div>
+{:else}
 <div class="jp-range-slider" on:click={handleRangeClick}>
   <div class="jp-range-progress" style={`left: ${low}%; right: ${100 - high}%`}></div>
   <input
@@ -95,6 +157,7 @@
     {max}
     id={id + '_min'}
     name={name + '_min'}
+    bind:this={leftSlider}
     bind:value={internalValue[0]}
   />
   <input
@@ -107,13 +170,8 @@
     {max}
     id={id + '_max'}
     name={name + '_max'}
+    bind:this={rightSlider}
     bind:value={internalValue[1]}
   />
 </div>
-
-{#if showValue}
-<div class="jp-range-value">
-  <div>{startLabel} {internalValue[0]}</div>
-  <div>{endLabel} {internalValue[1]}</div>
-</div>
 {/if}
\ No newline at end of file
diff --git a/packages/lib/src/form-fields/slider/slider.wc.pcss b/packages/lib/src/form-fields/slider/slider.wc.pcss
index d9fd83a6..6e954a3d 100644
--- a/packages/lib/src/form-fields/slider/slider.wc.pcss
+++ b/packages/lib/src/form-fields/slider/slider.wc.pcss
@@ -5,9 +5,8 @@
     font-size: 15px;
   }
   &-container {
-    min-width: 300px;
-    width: 1px;
     height: 20px;
+    position: relative;
 
     & input[type='range'] {
       -moz-appearance: none;
@@ -78,6 +77,38 @@
     }
   }
 
+  &-bubble {
+    position: absolute;
+    top: 0;
+    padding: 2.5px 6px;
+    color: white;
+    border-radius: 4px;
+    font-size: 12px;
+    white-space: nowrap;
+    transform: translateX(-50%);
+    background-color: var(--primary-color);
+
+    &:after {
+      content: "";
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-top: 5px solid var(--primary-color);
+      bottom: -5px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &-disabled {
+      background-color: var(--background-disabled);
+    }
+    &-disabled:after {
+      border-top: 5px solid var(--background-disabled);
+    }
+  }
+
   &-range-input {
     &::-webkit-slider-thumb {
       -webkit-appearance: none;
@@ -98,11 +129,11 @@
     }
 
     &:disabled::-webkit-slider-thumb:hover {
-      box-shadow: 0 0 0 10px rgba(131, 128, 127, 0.267);
+      box-shadow: 0 0 0 10px rgba(131, 128, 127, 0.1);
     }
 
     &:disabled:active::-webkit-slider-thumb {
-      box-shadow: 0 0 0 10px rgba(131, 128, 127, 0.267);
+      box-shadow: 0 0 0 10px rgba(131, 128, 127, 0.1);
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/lib/src/form-fields/slider/slider.wc.svelte b/packages/lib/src/form-fields/slider/slider.wc.svelte
index 2107f648..a27b6555 100644
--- a/packages/lib/src/form-fields/slider/slider.wc.svelte
+++ b/packages/lib/src/form-fields/slider/slider.wc.svelte
@@ -16,7 +16,7 @@
 />
 
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher, onMount } from 'svelte';
   import './slider.wc.pcss';
 
   export let disabled: boolean = false;
@@ -29,10 +29,34 @@
   export let discrete: boolean = true; //if true -> ticks, false -> smooth
   export let required = false;
   export let label = '';
+  export let showValue: boolean = false;
   export const getValue = () => value;
 
   const dispatch = createEventDispatcher();
+  let slider: HTMLInputElement;
+  let bubble: HTMLDivElement;
+  
+  function updateBubblePosition() {
+    if (!bubble || !slider) return;
+    
+    const val = parseFloat(slider.value);
+    const min = parseFloat(slider.min);
+    const max = parseFloat(slider.max);
+    const newVal = Number(((val - min) * 100) / (max - min));
+    
+    bubble.style.left = `calc(${newVal}% + (${8 - newVal * 0.165}px))`;
+    bubble.style.transform = `translateX(-50%)`;
+  }
 
+  onMount(() => {
+    updateBubblePosition();
+  });
+
+  $: {
+    value;
+    updateBubblePosition();
+  }
+  
   $: dispatch('value', { value });
   $: displayLabel = required ? `${label} *` : label;
 </script>
@@ -42,16 +66,34 @@
     {@html displayLabel}
   {/if}
 </div>
-<div class="jp-slider-container">
-  <input
-    type="range"
-    class="jp-slider-range-input"
-    bind:value
-    {id}
-    {disabled}
-    {min}
-    {max}
-    step={discrete ? step : 'any'}
-    {name}
-  />
-</div>
+{#if showValue}
+  <div class="jp-slider-container" style="padding-top: 20px;">
+    <div class="jp-slider-bubble" class:jp-slider-bubble-disabled={disabled} bind:this={bubble}>{value}</div>
+    <input
+      type="range"
+      class="jp-slider-range-input"
+      bind:value
+      bind:this={slider}
+      {id}
+      {disabled}
+      {min}
+      {max}
+      step={discrete ? step : 'any'}
+      {name}
+    />
+  </div>
+  {:else}
+  <div class="jp-slider-container">
+    <input
+      type="range"
+      class="jp-slider-range-input"
+      bind:value
+      {id}
+      {disabled}
+      {min}
+      {max}
+      step={discrete ? step : 'any'}
+      {name}
+    />
+  </div>
+{/if}

From cb63a4b2816e4acfa3b41a2c99734111f1749af3 Mon Sep 17 00:00:00 2001
From: lorka1 <lorena126os@gmail.com>
Date: Thu, 9 Jan 2025 13:08:48 +0100
Subject: [PATCH 2/4] fix(date-range): refine wording

---
 docs/docs/Form fields/date-range.md           |  8 ++--
 .../src/FormFieldDemos/DateRangeDemo.svelte   |  4 +-
 .../lib/src/form-fields/date-range/Day.svelte | 26 +++++-----
 .../src/form-fields/date-range/Month.svelte   | 18 +++----
 .../src/form-fields/date-range/Year.svelte    | 16 +++----
 .../date-range/date-range.wc.svelte           | 48 +++++++++----------
 6 files changed, 60 insertions(+), 60 deletions(-)

diff --git a/docs/docs/Form fields/date-range.md b/docs/docs/Form fields/date-range.md
index 368e1d2e..07ec498b 100644
--- a/docs/docs/Form fields/date-range.md	
+++ b/docs/docs/Form fields/date-range.md	
@@ -25,10 +25,10 @@ import '../../static/c/date-range.css';
 |   displayFormatFunction   | if `displayFormat` <br></br> is `custom` |                       `(date:Date) => string`                       |                 custom display format function                  |
 |           minDate         |                                          |                          `string \| Date `                          |        earliest date that can be selected by the user.          |
 |           maxDate         |                                          |                          `string \| Date `                          |          last date that can be selected by the user.            |
-|     maxSelectibleDays     |                                          |                                `number`                             |               number of days that can be in range               |
-|     minSelectibleDays     |                                          |                                `number`                             |              number of days that must be in range               |
-|     maxDateSelectible     |                                          |                                 `Date`                              |    Automatically set based on the value of maxSelectibleDays    |
-|     minDateSelectible     |                                          |                                 `Date`                              |    Automatically set based on the value of maxSelectibleDays    |
+|     maxSelectableDays     |                                          |                                `number`                             |               number of days that can be in range               |
+|     minSelectableDays     |                                          |                                `number`                             |              number of days that must be in range               |
+|     maxDateSelectable     |                                          |                                 `Date`                              |    Automatically set based on the value of maxSelectableDays    |
+|     minDateSelectable     |                                          |                                 `Date`                              |    Automatically set based on the value of maxSelectableDays    |
 <br></br>
 ****
 
diff --git a/packages/demo/src/FormFieldDemos/DateRangeDemo.svelte b/packages/demo/src/FormFieldDemos/DateRangeDemo.svelte
index 26c18776..8482e952 100644
--- a/packages/demo/src/FormFieldDemos/DateRangeDemo.svelte
+++ b/packages/demo/src/FormFieldDemos/DateRangeDemo.svelte
@@ -26,8 +26,8 @@
   <jp-date-range label="datepicker display format medium" displayFormat="medium" />
   <jp-date-range label="datepicker display format long" displayFormat="long" />
   <jp-date-range label="datepicker display format full" displayFormat="full" />
-  <jp-date-range minSelectibleDays="2" label="minSelectibleDays" />
-  <jp-date-range maxSelectibleDays="10" label="maxSelectibleDays" />
+  <jp-date-range minSelectableDays="2" label="minSelectableDays" />
+  <jp-date-range maxSelectableDays="10" label="maxSelectableDays" />
   <jp-date-range minDate="2024-10-2" label="minDate string format" />
   <jp-date-range {minDate} label="minDate date format" />
   <jp-date-range maxDate="2024-10-2" label="maxDate string format" />
diff --git a/packages/lib/src/form-fields/date-range/Day.svelte b/packages/lib/src/form-fields/date-range/Day.svelte
index 714f6e3e..f23a4b6c 100644
--- a/packages/lib/src/form-fields/date-range/Day.svelte
+++ b/packages/lib/src/form-fields/date-range/Day.svelte
@@ -12,11 +12,11 @@
   export let firstInternalValue = '';
   export let secondInternalValue = '';
   export let selectingFirst: boolean;
-  export let maxSelectibleDays: number;
-  export let minSelectibleDays: number;
-  export let maxDateSelectible: Date;
-  export let minDateSelectible: Date;
-  let isOutOfBonuds: boolean;
+  export let maxSelectableDays: number;
+  export let minSelectableDays: number;
+  export let maxDateSelectable: Date;
+  export let minDateSelectable: Date;
+  let isOutOfBounds: boolean;
 
   const dispatch = createEventDispatcher();
 
@@ -62,9 +62,9 @@
     day: number,
     selectingFirst: boolean
   ) {
-    if (!selectingFirst && maxSelectibleDays) {
+    if (!selectingFirst && maxSelectableDays) {
       const potentialDate = new Date(year, month, day);
-      if (potentialDate > maxDateSelectible || potentialDate < minDateSelectible) {
+      if (potentialDate > maxDateSelectable || potentialDate < minDateSelectable) {
         return true;
       }
     }
@@ -83,7 +83,7 @@
       if (
         ((potentialDate < minDateAfter && potentialDate > datePicked) ||
           (potentialDate > minDateBefore && potentialDate < datePicked)) &&
-        minSelectibleDays
+        minSelectableDays
       ) {
         return true;
       }
@@ -91,10 +91,10 @@
     return false;
   }
 
-  $: minDateBefore = calculateLimits.calculateRequiredBefore(firstInternalValue, minSelectibleDays);
-  $: minDateAfter = calculateLimits.calculateRequiredAfter(firstInternalValue, minSelectibleDays);
+  $: minDateBefore = calculateLimits.calculateRequiredBefore(firstInternalValue, minSelectableDays);
+  $: minDateAfter = calculateLimits.calculateRequiredAfter(firstInternalValue, minSelectableDays);
 
-  $: isOutOfBonuds =
+  $: isOutOfBounds =
     isDateOutOfSelectableBounds(col.year, col.month, col.day, selectingFirst) ||
     isDateOutOfMinRequiredBounds(col.year, col.month, col.day, selectingFirst);
   $: isOutOfMax = calculateLimits.isOutOfMaxBounds(internalMaxDate, col.year, col.month, col.day);
@@ -137,8 +137,8 @@
     class:jp-date-range-table-cell-lastValue={isLastValue && !isOnlyValue}
     class:jp-date-range-table-cell-onlyValue={isOnlyValue}
     on:click|preventDefault={handleClick}
-    class:jp-date-range-table-cell-disabled={isOutOfMax || isOutOfMin || isOutOfBonuds}
-    disabled={isOutOfMax || isOutOfMin || isOutOfBonuds}
+    class:jp-date-range-table-cell-disabled={isOutOfMax || isOutOfMin || isOutOfBounds}
+    disabled={isOutOfMax || isOutOfMin || isOutOfBounds}
   >
     {col.day}
   </button>
diff --git a/packages/lib/src/form-fields/date-range/Month.svelte b/packages/lib/src/form-fields/date-range/Month.svelte
index eca1f798..25c0b1b0 100644
--- a/packages/lib/src/form-fields/date-range/Month.svelte
+++ b/packages/lib/src/form-fields/date-range/Month.svelte
@@ -12,9 +12,9 @@
   export let secondMonthSelected: number | string | null;
   export let firstMonthSelected: number | string | null;
   export let selectingFirst: boolean;
-  export let maxSelectibleDays: number;
-  export let maxDateSelectible: Date;
-  export let minDateSelectible: Date;
+  export let maxSelectableDays: number;
+  export let maxDateSelectable: Date;
+  export let minDateSelectable: Date;
 
   const dispatch = createEventDispatcher();
   function handleClick() {
@@ -28,10 +28,10 @@
     month: number,
     selectingFirst: boolean
   ): boolean {
-    if (!selectingFirst && maxSelectibleDays) {
+    if (!selectingFirst && maxSelectableDays) {
       if (
-        (year >= maxDateSelectible.getFullYear() && month > maxDateSelectible.getMonth()) ||
-        (month < minDateSelectible.getMonth() && year <= minDateSelectible.getFullYear())
+        (year >= maxDateSelectable.getFullYear() && month > maxDateSelectable.getMonth()) ||
+        (month < minDateSelectable.getMonth() && year <= minDateSelectable.getFullYear())
       ) {
         return true;
       }
@@ -39,7 +39,7 @@
     return false;
   }
 
-  $: isOutOfBonuds = isMonthOutOfSelectableBounds(pickerYear, index, selectingFirst);
+  $: isOutOfBounds = isMonthOutOfSelectableBounds(pickerYear, index, selectingFirst);
   $: isOutOfMax = calculateLimits.isOutOfMaxBounds(internalMaxDate, pickerYear, index, 1);
   $: isOutOfMin = calculateLimits.isOutOfMinBounds(internalMinDate, pickerYear, index, 31);
 </script>
@@ -58,8 +58,8 @@
       ) >= parseInt(`${pickerYear}${index + 1 < 10 ? '0' : ''}${index + 1}`, 10)
     : firstMonthSelected == (index < 0 ? '11' : index > 11 ? '0' : index) &&
       firstYearSelected == pickerYear + (index < 0 ? -1 : index > 11 ? 1 : 0)}
-  class:jp-date-range-menu-month-grid-cell-disabled={isOutOfMax || isOutOfMin || isOutOfBonuds}
-  disabled={isOutOfMax || isOutOfMin || isOutOfBonuds}
+  class:jp-date-range-menu-month-grid-cell-disabled={isOutOfMax || isOutOfMin || isOutOfBounds}
+  disabled={isOutOfMax || isOutOfMin || isOutOfBounds}
 >
   {month}
 </button>
diff --git a/packages/lib/src/form-fields/date-range/Year.svelte b/packages/lib/src/form-fields/date-range/Year.svelte
index 613c5e4b..2a834023 100644
--- a/packages/lib/src/form-fields/date-range/Year.svelte
+++ b/packages/lib/src/form-fields/date-range/Year.svelte
@@ -9,9 +9,9 @@
   export let firstYearSelected: number | null;
   export let secondYearSelected: number | null;
   export let selectingFirst: boolean;
-  export let maxSelectibleDays: number;
-  export let maxDateSelectible: Date;
-  export let minDateSelectible: Date;
+  export let maxSelectableDays: number;
+  export let maxDateSelectable: Date;
+  export let minDateSelectable: Date;
 
   const dispatch = createEventDispatcher();
   function handleClick() {
@@ -21,15 +21,15 @@
   }
 
   function isYearOutOfSelectableBounds(year: number, selectingFirst: boolean): boolean {
-    if (!selectingFirst && maxSelectibleDays) {
-      if (year > maxDateSelectible.getFullYear() || year < minDateSelectible.getFullYear()) {
+    if (!selectingFirst && maxSelectableDays) {
+      if (year > maxDateSelectable.getFullYear() || year < minDateSelectable.getFullYear()) {
         return true;
       }
     }
     return false;
   }
 
-  $: isOutOfBonuds = isYearOutOfSelectableBounds(year, selectingFirst);
+  $: isOutOfBounds = isYearOutOfSelectableBounds(year, selectingFirst);
   $: isOutOfMax = calculateLimits.isOutOfMaxBounds(internalMaxDate, year, 0, 1);
   $: isOutOfMin = calculateLimits.isOutOfMinBounds(internalMinDate, year, 11, 31);
 </script>
@@ -40,8 +40,8 @@
     ? Number(firstYearSelected) <= year && secondYearSelected >= year
     : firstYearSelected == year}
   on:click|preventDefault={handleClick}
-  class:jp-date-range-menu-year-row-cell-disabled={isOutOfMax || isOutOfMin || isOutOfBonuds}
-  disabled={isOutOfMax || isOutOfMin || isOutOfBonuds}
+  class:jp-date-range-menu-year-row-cell-disabled={isOutOfMax || isOutOfMin || isOutOfBounds}
+  disabled={isOutOfMax || isOutOfMin || isOutOfBounds}
 >
   {year}
 </button>
diff --git a/packages/lib/src/form-fields/date-range/date-range.wc.svelte b/packages/lib/src/form-fields/date-range/date-range.wc.svelte
index 777c77fc..cf539f9e 100644
--- a/packages/lib/src/form-fields/date-range/date-range.wc.svelte
+++ b/packages/lib/src/form-fields/date-range/date-range.wc.svelte
@@ -52,10 +52,10 @@
   export let minDate: string | Date;
   export let maxDate: string | Date;
   export let selectingFirst = true;
-  export let maxSelectibleDays: number;
-  export let minSelectibleDays: number;
-  export let maxDateSelectible: Date;
-  export let minDateSelectible: Date;
+  export let maxSelectableDays: number;
+  export let minSelectableDays: number;
+  export let maxDateSelectable: Date;
+  export let minDateSelectable: Date;
 
   let firstSelectedDateObject = new Date();
   let secondSelectedDateObject = new Date();
@@ -217,7 +217,7 @@
   ) {
     return (
       isOutOfMinBounds(internalMinDate, year, month, day) ||
-      (minDateAllowed > new Date(year, month, day) && !selectingFirst && maxSelectibleDays)
+      (minDateAllowed > new Date(year, month, day) && !selectingFirst && maxSelectableDays)
     );
   }
 
@@ -231,7 +231,7 @@
   ) {
     return (
       isOutOfMaxBounds(internalMaxDate, year, month, day) ||
-      (maxDateAllowed < new Date(year, month, day) && !selectingFirst && maxSelectibleDays)
+      (maxDateAllowed < new Date(year, month, day) && !selectingFirst && maxSelectableDays)
     );
   }
 
@@ -261,8 +261,8 @@
     openPicker = !openPicker;
   }
 
-  $: maxDateSelectible = calculateMaxDate(firstInternalValue, maxSelectibleDays);
-  $: minDateSelectible = calculateMinDate(firstInternalValue, maxSelectibleDays);
+  $: maxDateSelectable = calculateMaxDate(firstInternalValue, maxSelectableDays);
+  $: minDateSelectable = calculateMinDate(firstInternalValue, maxSelectableDays);
 
   $: internalMinDate = minDate ? (minDate instanceof Date ? minDate : new Date(minDate)) : null;
   $: internalMaxDate = maxDate ? (maxDate instanceof Date ? maxDate : new Date(maxDate)) : null;
@@ -272,7 +272,7 @@
     pickerYear,
     pickerMonth,
     1,
-    minDateSelectible,
+    minDateSelectable,
     selectingFirst
   );
   $: internalMaxMonthCheck = checkMaxBounds(
@@ -280,7 +280,7 @@
     pickerYear,
     pickerMonth,
     31,
-    maxDateSelectible,
+    maxDateSelectable,
     selectingFirst
   );
 
@@ -289,7 +289,7 @@
     pickerYear,
     0,
     1,
-    minDateSelectible,
+    minDateSelectable,
     selectingFirst
   );
   $: internalMaxYearCheck = checkMaxBounds(
@@ -297,7 +297,7 @@
     pickerYear,
     11,
     31,
-    maxDateSelectible,
+    maxDateSelectable,
     selectingFirst
   );
 
@@ -306,7 +306,7 @@
     2024 + yearPickerIndex * 4 * 6,
     0,
     1,
-    minDateSelectible,
+    minDateSelectable,
     selectingFirst
   );
   $: internalMaxYearPageCheck = checkMaxBounds(
@@ -314,7 +314,7 @@
     2024 + yearPickerIndex * 4 * 6,
     11,
     31,
-    maxDateSelectible,
+    maxDateSelectable,
     selectingFirst
   );
 
@@ -512,11 +512,11 @@
             <div class="jp-date-range-table-row">
               {#each row as col}
                 <Day
-                  {minDateSelectible}
-                  {maxDateSelectible}
+                  {minDateSelectable}
+                  {maxDateSelectable}
                   {col}
-                  {minSelectibleDays}
-                  {maxSelectibleDays}
+                  {minSelectableDays}
+                  {maxSelectableDays}
                   {selectingFirst}
                   {firstDateSelected}
                   {internalMaxDate}
@@ -577,15 +577,15 @@
               {#each row as year}
                 <div class="jp-date-range-menu-year-row-cell">
                   <Year
-                    {minDateSelectible}
-                    {maxDateSelectible}
+                    {minDateSelectable}
+                    {maxDateSelectable}
                     {internalMaxDate}
                     {internalMinDate}
                     {firstYearSelected}
                     {secondYearSelected}
                     {year}
                     {selectingFirst}
-                    {maxSelectibleDays}
+                    {maxSelectableDays}
                     on:yearSelected={handleYearSelected}
                   />
                 </div>
@@ -632,8 +632,8 @@
             {#each monthMap as month, index}
               <div class="jp-date-range-menu-month-grid-cell">
                 <Month
-                  {minDateSelectible}
-                  {maxDateSelectible}
+                  {minDateSelectable}
+                  {maxDateSelectable}
                   {index}
                   {month}
                   {pickerYear}
@@ -644,7 +644,7 @@
                   {firstYearSelected}
                   {secondYearSelected}
                   {selectingFirst}
-                  {maxSelectibleDays}
+                  {maxSelectableDays}
                   on:monthSelected={handleMonthSelected}
                 />
               </div>

From 5f8e6628be20a5052702e41dd0837d8616d2fa67 Mon Sep 17 00:00:00 2001
From: lorka1 <lorena126os@gmail.com>
Date: Thu, 9 Jan 2025 14:20:06 +0100
Subject: [PATCH 3/4] fix(range): prevent thumb movement if disabled

---
 packages/lib/src/form-fields/range/range.wc.svelte | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/lib/src/form-fields/range/range.wc.svelte b/packages/lib/src/form-fields/range/range.wc.svelte
index 888b125f..b83ab3ee 100644
--- a/packages/lib/src/form-fields/range/range.wc.svelte
+++ b/packages/lib/src/form-fields/range/range.wc.svelte
@@ -34,12 +34,18 @@
   export const getValue = () => internalValue;
 
   const dispatch = createEventDispatcher();
+
   let leftSlider: HTMLInputElement;
   let leftBubble: HTMLDivElement;
   let rightSlider: HTMLInputElement;
   let rightBubble: HTMLDivElement;
 
   function handleRangeClick(event: MouseEvent) {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+
     const slider = event.currentTarget as HTMLElement;
     const rect = slider.getBoundingClientRect();
     const percentage = (event.clientX - rect.left) / rect.width;

From e45d0cafe563203bd93094a36fc4e980f221ab4f Mon Sep 17 00:00:00 2001
From: lorka1 <lorena126os@gmail.com>
Date: Thu, 9 Jan 2025 15:03:50 +0100
Subject: [PATCH 4/4] fix(range, slider): update range css, change slider style
 and functionality

---
 .../lib/src/form-fields/range/range.wc.pcss    |  2 +-
 .../lib/src/form-fields/slider/slider.wc.pcss  | 18 ++++++++++++++++++
 .../src/form-fields/slider/slider.wc.svelte    |  5 ++++-
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/lib/src/form-fields/range/range.wc.pcss b/packages/lib/src/form-fields/range/range.wc.pcss
index f949032c..af6df2ab 100644
--- a/packages/lib/src/form-fields/range/range.wc.pcss
+++ b/packages/lib/src/form-fields/range/range.wc.pcss
@@ -138,7 +138,7 @@
     }
     &:hover {
       &::-webkit-slider-thumb {
-        box-shadow: 0 0 0 10px rgba(131, 128, 127, 0.1);
+        box-shadow: 0 0 0 10px rgba(255, 85, 0, 0.1);
       }
     }
 
diff --git a/packages/lib/src/form-fields/slider/slider.wc.pcss b/packages/lib/src/form-fields/slider/slider.wc.pcss
index 6e954a3d..f6a1582b 100644
--- a/packages/lib/src/form-fields/slider/slider.wc.pcss
+++ b/packages/lib/src/form-fields/slider/slider.wc.pcss
@@ -10,6 +10,7 @@
 
     & input[type='range'] {
       -moz-appearance: none;
+      -webkit-appearance: none;
       width: 100%;
       height: 20%;
       padding: 0;
@@ -77,6 +78,19 @@
     }
   }
 
+  &-progress {
+    position: absolute;
+    left: 0;
+    transform: translateY(280%);
+    height: 4px;
+    background-color: var(--primary-color, #ff5500);
+    border-radius: 4px;
+
+    &-disabled {
+      background-color: var(--background-disabled);
+    }
+  }
+
   &-bubble {
     position: absolute;
     top: 0;
@@ -132,6 +146,10 @@
       box-shadow: 0 0 0 10px rgba(131, 128, 127, 0.1);
     }
 
+    &:disabled::-webkit-slider-thumb {
+      background-color: var(--background-secondary);
+    }
+
     &:disabled:active::-webkit-slider-thumb {
       box-shadow: 0 0 0 10px rgba(131, 128, 127, 0.1);
     }
diff --git a/packages/lib/src/form-fields/slider/slider.wc.svelte b/packages/lib/src/form-fields/slider/slider.wc.svelte
index a27b6555..954fdc0f 100644
--- a/packages/lib/src/form-fields/slider/slider.wc.svelte
+++ b/packages/lib/src/form-fields/slider/slider.wc.svelte
@@ -56,7 +56,8 @@
     value;
     updateBubblePosition();
   }
-  
+
+  $: low = Math.round(100 * ((value - min) / (max - min)));
   $: dispatch('value', { value });
   $: displayLabel = required ? `${label} *` : label;
 </script>
@@ -69,6 +70,7 @@
 {#if showValue}
   <div class="jp-slider-container" style="padding-top: 20px;">
     <div class="jp-slider-bubble" class:jp-slider-bubble-disabled={disabled} bind:this={bubble}>{value}</div>
+    <div class="jp-slider-progress" style={`right: ${100-low}%;`}></div>
     <input
       type="range"
       class="jp-slider-range-input"
@@ -84,6 +86,7 @@
   </div>
   {:else}
   <div class="jp-slider-container">
+    <div class="jp-slider-progress" style={`right: ${100-low}%;`}></div>
     <input
       type="range"
       class="jp-slider-range-input"