add range price drop drap

facets.liquid 
line 330
    <price-range1 class="price-range">
                                {%- assign min_value = filter.min_value.value | default: 0.0 | divided_by: 100.0 -%}
                                {%- assign max_value = filter.max_value.value
                                  | default: filter.range_max
                                  | divided_by: 100.0
                                -%}
                                {%- assign range_max = filter.range_max | divided_by: 100.0 | ceil -%}

                                {% assign lower_bound_progress = min_value | divided_by: range_max | times: 100.0 %}
                                {% assign higher_bound_progress = max_value | divided_by: range_max | times: 100.0 %}

                                <div
                                  class="price-range__range-group range-group"
                                  style="--range-min: {{ lower_bound_progress }}%; --range-max: {{ higher_bound_progress }}%"
                                >
                                  <input
                                    type="range"
                                    aria-label="{{ 'collection.filter.price_filter_from' | t }}"
                                    class="range"
                                    min="0"
                                    max="{{ range_max | ceil }}"
                                    value="{{ min_value | ceil }}"
                                  >
                                  <input
                                    type="range"
                                    aria-label="{{ 'collection.filter.price_filter_to' | t }}"
                                    class="range"
                                    min="0"
                                    max="{{ range_max | ceil }}"
                                    value="{{ max_value | ceil }}"
                                  >
                                </div>

                                <div class="price-range__input-group">
                                  <div class="price-range__input input-prefix">
                                    <span class="input-prefix__value">{{ cart.currency.symbol }}</span>
                                    <input
                                      aria-label="{{ 'collection.filter.price_filter_from' | t }}"
                                      class="input-prefix__field"
                                      type="number"
                                      inputmode="numeric"
                                      {% if filter.min_value.value %}
                                        value="{{ min_value | ceil }}"
                                      {% endif %}
                                      name="{{ filter.min_value.param_name }}"
                                      min="0"
                                      max="{{ max_value | ceil }}"
                                      placeholder="0"
                                    >
                                  </div>

                                  <span class="price-range__delimiter text--small">-</span>

                                  <div class="price-range__input input-prefix">
                                    <span class="input-prefix__value">{{ cart.currency.symbol }}</span>
                                    <input
                                      aria-label="{{ 'collection.filter.price_filter_to' | t }}"
                                      class="input-prefix__field"
                                      type="number"
                                      inputmode="numeric"
                                      {% if filter.max_value.value %}
                                        value="{{ max_value | ceil }}"
                                      {% endif %}
                                      name="{{ filter.max_value.param_name }}"
                                      min="{{ min_value | ceil }}"
                                      max="{{ range_max | ceil }}"
                                      placeholder="{{ range_max | ceil }}"
                                    >
                                  </div>
                                </div>
                              </price-range1>
js 

class PriceRange1 extends HTMLElement {
  connectedCallback() {
    this.rangeLowerBound = this.querySelector(".price-range__range-group input:first-child");
    this.rangeHigherBound = this.querySelector(".price-range__range-group input:last-child");
    this.textInputLowerBound = this.querySelector(".price-range__input:first-child input");
    this.textInputHigherBound = this.querySelector(".price-range__input:last-child input");

    // Event listeners for text input focus and change
    this.textInputLowerBound.addEventListener("focus", () => this.textInputLowerBound.select());
    this.textInputHigherBound.addEventListener("focus", () => this.textInputHigherBound.select());

    this.textInputLowerBound.addEventListener("change", (event) => {
      const newValue = Math.max(Math.min(parseInt(event.target.value), parseInt(this.textInputHigherBound.value || event.target.max) - 1), event.target.min);
      event.target.value = newValue;
      this.rangeLowerBound.value = newValue;
      this.updateRangeStyles();
    });

    this.textInputHigherBound.addEventListener("change", (event) => {
      const newValue = Math.min(Math.max(parseInt(event.target.value), parseInt(this.textInputLowerBound.value || event.target.min) + 1), event.target.max);
      event.target.value = newValue;
      this.rangeHigherBound.value = newValue;
      this.updateRangeStyles();
    });

    // Event listeners for range slider change and input
    this.rangeLowerBound.addEventListener("change", (event) => {
      this.textInputLowerBound.value = event.target.value;
      this.textInputLowerBound.dispatchEvent(new Event("change", { bubbles: true }));
    });

    this.rangeHigherBound.addEventListener("change", (event) => {
      this.textInputHigherBound.value = event.target.value;
      this.textInputHigherBound.dispatchEvent(new Event("change", { bubbles: true }));
    });

    this.rangeLowerBound.addEventListener("input", (event) => {
      this.dispatchEvent(new CustomEvent("collection:abort-loading", { bubbles: true }));
      event.target.value = Math.min(parseInt(event.target.value), parseInt(this.textInputHigherBound.value || event.target.max) - 1);
      this.textInputLowerBound.value = event.target.value;
      this.updateRangeStyles();
    });

    this.rangeHigherBound.addEventListener("input", (event) => {
      this.dispatchEvent(new CustomEvent("collection:abort-loading", { bubbles: true }));
      event.target.value = Math.max(parseInt(event.target.value), parseInt(this.textInputLowerBound.value || event.target.min) + 1);
      this.textInputHigherBound.value = event.target.value;
      this.updateRangeStyles();
    });
  }

  updateRangeStyles() {
    this.rangeLowerBound.parentElement.style.setProperty("--range-min", `${(parseInt(this.rangeLowerBound.value) / parseInt(this.rangeLowerBound.max)) * 100}%`);
    this.rangeHigherBound.parentElement.style.setProperty("--range-max", `${(parseInt(this.rangeHigherBound.value) / parseInt(this.rangeHigherBound.max)) * 100}%`);
  }
}

window.customElements.define("price-range1", PriceRange1);



css 
:root {
  /* Define your color variables here */
  --heading-color: #000; /* Replace with your preferred color */
  --secondary-background: #000; /* Replace with your preferred color */
  --border-color: #000; /* Replace with your preferred color */
  --range-min: 20%; /* Example for minimum range fill */
  --range-max: 80%; /* Example for maximum range fill */
}

*** FILTER  PRICE ***/
  .facets__price .field-currency{
    display: none;
  }
  .range {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    width: 100%;
  }
  
  .range::-webkit-slider-thumb {
    -webkit-appearance: none;
  }
  
  .range::-webkit-slider-thumb {
    background: var(--heading-color);
    cursor: pointer;
    z-index: 1;
    box-shadow: 0 0 0 0.125rem var(--secondary-background);
    border: none;
    border-radius: 100%;
    width: 0.625rem;
    height: 0.625rem;
    margin-top: -0.1875rem;
    position: relative;
  }
  
  .range::-webkit-slider-runnable-track {
    cursor: pointer;
    background: var(--heading-color);
    border: none;
    border-radius: 0.25rem;
    width: 100%;
    height: 0.25rem;
  }
  
  .range::-moz-range-thumb {
    background: var(--heading-color);
    cursor: pointer;
    box-shadow: 0 0 0 0.125rem var(--secondary-background);
    border: none;
    border-radius: 100%;
    width: 0.0625rem;
    height: 0.6875rem;
  }
  
  .range::-moz-range-progress {
    cursor: pointer;
    border: none;
    border-radius: 0.25rem;
    width: 100%;
    height: 0.25rem;
  }
  
  .range::-moz-range-track {
    cursor: pointer;
    border: none;
    border-radius: 0.25rem;
    width: 100%;
    height: 0.25rem;
  }
  
  .range::-moz-range-progress {
    background-color: var(--heading-color);
  }
  
  .range::-moz-range-track {
    background-color: var(--border-color);
  }
  
  @media screen and not (any-hover: hover) {
    .range::-webkit-slider-thumb {
      width: 0.0625rem;
      height: 0.6875rem;
      margin-top: -0.5rem;
    }
  
    .range::-moz-range-thumb {
      width: 0.0625rem;
      height: 0.6875rem;
    }
  }
  
  .range-group {
      background: linear-gradient(to right, var(--border-color) var(--range-min), var(--heading-color) var(--range-min), var(--heading-color) var(--range-max), var(--border-color) var(--range-max));
      border-radius: 0.25rem;
      height: 0.25rem;
      margin-top: 1rem;
  }
  
  .range-group .range {
    pointer-events: none;
    vertical-align: top;
    height: 0.25rem;
  }
  
  .range-group .range::-webkit-slider-runnable-track {
    background: none;
  }
  
  .range-group .range::-webkit-slider-thumb {
    pointer-events: auto;
  }
  
  .range-group .range::-moz-range-progress {
    background: none;
  }
  
  .range-group .range::-moz-range-track {
    background: none;
  }
  
  .range-group .range::-moz-range-thumb {
    pointer-events: auto;
  }
  
  .range-group .range:last-child {
      position: absolute;
      top: -2px;
      left: 0;
  }
  price-range1.price-range {
      position: relative;
  }
  
  .facets__header-vertical {
      display: none;
  }
  .price-range__input-group {
      display: flex;
      width: 100%;
  }
  .price-range__input {
      flex: 1 0 0;
      min-width: 0;
  }
  .price-range__input.input-prefix {
      border: 0.0625rem solid var(--border-color);
      background-color: #fff;
      justify-content: space-between;
      align-items: center;
      padding: 0.3125rem 0.625rem;
      font-size: 0.875rem;
      display: flex;
  }
  .price-range__input-group {
      display: flex;
      width: 100%;
      margin-top: 1rem;
  }
  input.input-prefix__field {
      -webkit-appearance: none;
      appearance: none;
      -moz-appearance: textfield;
      text-align: end;
      border: none;
      width: 100%;
      min-width: 0;
      font-size: 1rem;
  }
  .price-range__delimiter {
      margin: 0 0.75rem;
  }
  input.range {
      position: relative;
      top: -2px;
  }
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  /* For Firefox */
  input[type="number"] {
    -moz-appearance: textfield;
  }
  input.input-prefix__field {
      color: #000;
  }
  input.input-prefix__field:placeholder{
    color:#000;
  }