how to add Filter price with progress bar

<details 
id="Details-{{ forloop.index }}-{{ section.id }}"
class="{% if filter_type == 'horizontal' %}disclosure-has-popup facets__disclosure{% else %} facets__disclosure-vertical{% endif %} js-filter"
data-index="{{ forloop.index }}"
if filter_type == 'vertical' and forloop.index == 1 %}
open
{% endif %}
>

  <summary class="facets__summary caption-large focus-offset">
   <div>
     <span>{{ filter.label | escape }}</span>
       {% render 'icon-caret' %}
   </div>
  </summary>
{%- assign max_price_amount = filter.range_max | money_without_currency | round | strip_html | escape -%}

<div class="double_range_slider_box">
   <div class="double_range_slider">
     <span class="range_track" id="range_track"></span>
     <input type="range" class="min" min="0" 

                      max="{{ max_price_amount }}"

                      {%- if filter.min_value.value -%}

                        {%- if uses_comma_decimals -%}

                          value="{{ filter.min_value.value | money_without_currency | replace: '.', '' | replace: ',', '.' }}"

                        {%- else -%}

                          value="{{ filter.min_value.value | money_without_currency | replace: ',', '' }}"

                      {%- endif %}

                        {% else %}

                          value="0"

                      {%- endif -%}

                      step="0">

                      <input type="range" class="max" min="0" 

                        max="{{ max_price_amount }}"

                      {%- if filter.max_value.value -%}

                        {%- if uses_comma_decimals -%}

                          value="{{ filter.max_value.value | money_without_currency | replace: '.', '' | replace: ',', '.' }}"

                        {%- else -%}

                          value="{{ filter.max_value.value | money_without_currency | replace: ',', '' }}"

                        {%- endif %}

                        {% else %}

                          value="{{ max_price_amount }}"

                    {%- endif -%}

                        step="0">

                    </div>

                   </div>

                    <!-- <div id="slider-range"></div> -->

                    <div

                      id="Facet-{{ forloop.index }}-{{ section.id }}"

                      class="{% if filter_type == 'horizontal' %}facets__display{% else %}facets__display-vertical{% endif %}"

                    >

                      <div class="{% if filter_type == 'horizontal' %}facets__header{% else %}facets__header-vertical{% endif %}">

                      {% comment %}        

                        <span class="facets__selected">

                          {{- 'products.facets.max_price' | t: price: max_price_amount -}}

                        </span>

                      {% endcomment %}        

                        {%- if filter_type != 'vertical' -%}

                          <facet-remove>

                            <a href="{{ filter.url_to_remove }}" class="facets__reset link underlined-link">

                              {{ 'products.facets.reset' | t }}

                            </a>

                          </facet-remove>

                        {%- endif -%}

                      </div>

                      <price-range class="facets__price">

                        <div class="field">

                        <span class="field-currency">{{ cart.currency.symbol }}</span>

                          <input

                            class="field__input"

                            name="{{ filter.min_value.param_name }}"

                            id="Filter-{{ filter.label | escape }}-GTE"

                            {%- if filter.min_value.value -%}

                              {%- if uses_comma_decimals -%}

                                value="{{ filter.min_value.value | money_without_currency | replace: '.', '' | replace: ',', '.' }}"

                              {%- else -%}

                                value="{{ filter.min_value.value | money_without_currency | replace: ',', '' }}"

                            {%- endif %}

                              {% else %}

                                value="0"

                            {%- endif -%}

                            type="number"

                            placeholder="0"

                            min="0"

                            {%- if uses_comma_decimals -%}

                              max="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"

                            {%- else -%}

                              max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"

                            {% endif %}

                          >

                        </div>

                        {%- if filter_type != 'vertical' -%}

                        {%- endif -%}

                        <div class="field">

                          <span class="field-currency">{{ cart.currency.symbol }}</span>

                          <input

                            class="field__input"

                            name="{{ filter.max_value.param_name }}"

                            id="Filter-{{ filter.label | escape }}-LTE"

                            {%- if filter.max_value.value -%}

                              {%- if uses_comma_decimals -%}

                                value="{{ filter.max_value.value | money_without_currency | replace: '.', '' | replace: ',', '.' }}"

                              {%- else -%}

                                value="{{ filter.max_value.value | money_without_currency | replace: ',', '' }}"

                              {%- endif %}

                              {% else %}

                                value="{{ max_price_amount }}"

                            {%- endif -%}

                            type="number"

                            min="0"

                            {%- if uses_comma_decimals -%}

                              placeholder="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"

                              max="{{ filter.range_max | money_without_currency | replace: '.', '' | replace: ',', '.' }}"

                            {%- else -%}

                              placeholder="{{ filter.range_max | money_without_currency | replace: ',', '' }}"

                              max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"

                            {% endif %}

                          >

                        </div>

                      </price-range>

                    </div>

                  </details>    

2) facets.js paste below Line number (233)

let minRangeValueGap = 6;

const range = document.getElementById("range_track");

const rangeInput = document.querySelectorAll("input[type='range']");

let minRange, maxRange, minPercentage, maxPercentage;

const setMinValueOutput = () => {

  $( "#Filter-PRICE-GTE" ).val(rangeInput[0].value);

  minRange = parseFloat(rangeInput[0].value);

};

const setMaxValueOutput = () => {

  maxRange = parseFloat(rangeInput[1].value);

  var maxRangef = parseFloat(rangeInput[1].value);

  $( "#Filter-PRICE-LTE" ).val(maxRangef);

};

rangeInput.forEach((input) => {

  input.addEventListener("change", (e) => {

    setMinValueOutput();

    setMaxValueOutput();

    // console.log("maxRange=>",maxRange);

    if (maxRange - minRange < minRangeValueGap) {

      if (e.target.className === "min") {

        rangeInput[0].value = maxRange - minRangeValueGap;

        setMinValueOutput();

        e.target.style.zIndex = "2";

      } else {

        rangeInput[1].value = minRange + minRangeValueGap;

        e.target.style.zIndex = "2";

        setMaxValueOutput();

      }

    }

  });

});