Smart filter, replace "From", "To" values ​​with minimum and maximum values?

Question

1C-Bitrix

Good afternoon! I met with a problem, I want to put these values ​​in the smart filter in the input fields of the maximum and minimum values, those with a slider, by default in these fields there are simply the inscriptions "From" and "To".
Of course, you can put it in placeholder="<?=$arItem["VALUES"]["MIN"]["VALUE"]?>" but this is again not very beautiful, because there are actually no values ​​in the fields.
/bitrix/www/bitrix/components/bitrix/catalog.smart.filter/templates/bootstrap_v4/template.php ~80 line

<div class="smart-filter-input-container">
<input
         class="min-price form-control form-control-sm"
         type="number"
         name="<? echo $arItem["VALUES"]["MIN"]["CONTROL_NAME"] ?>"
         id="<? echo $arItem["VALUES"]["MIN"]["CONTROL_ID"] ?>"
         value="<? echo $arItem["VALUES"]["MIN"]["HTML_VALUE"] ?>"
         size="5"
         placeholder="<?=$arItem["VALUES"]["MIN"]["VALUE"]?>"
         onkeyup="smartFilter.keyup(this)"
          />
</div>

I tried to put in value

<?=($arItem["VALUES"]["MIN"]["HTML_VALUE"]) ? round($arItem["VALUES"]["MIN"]["HTML_VALUE"]) : ($arItem["VALUES"]["MIN"]["VALUE"])?>

Everything works, but when you move the slider and return it to the maximum or minimum value, the field becomes empty ...
I think that this is still in JS

spoiler

$arJsParams = array(
"leftSlider" => 'left_slider_' . $key,
"rightSlider" => 'right_slider_' . $key,
"tracker" => "drag_tracker_" . $key,
"trackerWrap" => "drag_track_" . $key,
"minInputId" => $arItem["VALUES"]["MIN"]["CONTROL_ID"],
"maxInputId" => $arItem["VALUES"]["MAX"]["CONTROL_ID"],
"minPrice" => $arItem["VALUES"]["MIN"]["VALUE"],
"maxPrice" => $arItem["VALUES"]["MAX"]["VALUE"],
"curMinPrice" => $arItem["VALUES"]["MIN"]["HTML_VALUE"],
"curMaxPrice" => $arItem["VALUES"]["MAX"]["HTML_VALUE"],
"fltMinPrice" => intval($arItem["VALUES"]["MIN"]["FILTERED_VALUE"]) ? $arItem["VALUES"]["MIN"]["FILTERED_VALUE"] : $arItem["VALUES"]["MIN"]["VALUE"],
"fltMaxPrice" => intval($arItem["VALUES"]["MAX"]["FILTERED_VALUE"]) ? $arItem["VALUES"]["MAX"]["FILTERED_VALUE"] : $arItem["VALUES"]["MAX"]["VALUE"],
"precision" => $precision,
"colorUnavailableActive" => 'colorUnavailableActive_' . $key,
"colorAvailableActive" => 'colorAvailableActive_' . $key,
"colorAvailableInactive" => 'colorAvailableInactive_' . $key,
);

Answer 1

Hello again)
In the template of the filter component in template.php in value you did the right thing, just remove the round and add the corresponding data parameters to the inputs

data-price="<?=$arItem["VALUES"]["MIN"]["VALUE"];?>"
data-price="<?=$arItem["VALUES"]["MAX"]["VALUE"];?>"

Further in script.js
1. At the very beginning, add 2 to the function JCSmartFilter function
. After this function, add

JCSmartFilter.prototype.setInputsPrice = function() {
  if(!this.form)
    return;
  
  if(!Object.keys(this.inputsPrice).length) {
    var inputs = BX.findChildren(this.form, {'tag': new RegExp('^(input)$', 'i'), 'attribute': {'data-price': new RegExp('^(.*)$', 'i')}}, true);
    
    inputs.forEach(function(item, i) {
      this.inputsPrice[item.name] = item.dataset.price;
    }, this);
  }
}

3. Find the function JCSmartFilter.prototype.reload there is a check if (this.form) inside it add
4. Find the function JCSmartFilter.prototype.values2post before it add the function

JCSmartFilter.prototype.values = function(values) {
  values.forEach(function(item, i) {
    if(Object.keys(this.inputsPrice).indexOf(item.name) !== -1) {
      values[i].value = parseFloat(item.value) !== parseFloat(this.inputsPrice[item.name]) ? item.value : '';
    }
  }, this);
}

5. And inside the JCSmartFilter.prototype.values2post function, add
6. Find the SmartFilter.prototype.recountMinPrice function and remove it

if (newMinPrice != this.minPrice)
  this.minInput.value = newMinPrice;
else
  this.minInput.value = "";

just leave it
at 7. Same with the SmartFilter.prototype.recountMaxPrice function

Answer 2

Make the AJAX mode only for the catalog.smart.filter Bitrix filter. Override make FORM_ACTION your own

<script>
  var smartFilter = new JCSmartFilter('<?=CUtil::JSEscape($arResult['FORM_ACTION'])?>/ajax/catalog_smart_filter_ajax.php');
</script>