Как перенести свою верстку в шаблон компонента "Умный фильтра"

У меня возникла проблема с кастомизацией умного фильтра в 1 битрикс.

Я написал переделал код под свой ползунок, но при этом все перестало работать. Что я делаю не так? Буду рад помощи и статьям или видео как кастомизировать этот компонент. А то в интернете мало информации.

<div class=" bx-filter-block" data-role="bx_filter_block">
                            <div class="accordion__body ">
                            <?
                            $arCur = current($arItem["VALUES"]);
                            switch ($arItem["DISPLAY_TYPE"])
                            {
                                case "A"://NUMBERS_WITH_SLIDER  ЗДЕСЬ ЦЕНА
                                    ?>
                                    <div class="col-xs-6 bx-filter-parameters-box-container-block bx-left">
                                    <div class="range" data-max="700000" data-after-output="&lt;span&gt; ₽&lt;/span&gt;">
                                        <div class="range__inputs">
                                            <input
                                                class="range__input"
                                                type="text"
                                                name="min-price" value="0 ₽"
                                                id="<?echo $arItem["VALUES"]["MIN"]["CONTROL_ID"]?>"
                                                value="0"
                                                size="5"
                                                onkeyup="smartFilter.keyup(this)"
                                            />
                                            <input
                                                class="range__input"
                                                type="text"
                                                name="max-price" 
                                                
                                                id="<?echo $arItem["VALUES"]["MAX"]["CONTROL_ID"]?>"
                                                value="700"
                                                size="5"
                                                onkeyup="smartFilter.keyup(this)"
                                            />
                                        </div>
                                        <? $arItem["VALUES"]["MAX"]["HTML_VALUE"]?>
                                        <div class="range__body" id="drag_track_<?=$key?>">
                              <span class="range__btn range__left-btn"></span>
                              <div class="range__show-line"></div>
                              <span class="range__btn range__right-btn"></span>
                            </div>
                            <span class="range__val range__min-val bx-ui-slider-handle left"  id="left_slider_<?=$key?>">0<span></span></span>
                            <span class="range__val range__max-val bx-ui-slider-handle right" id="right_slider_<?=$key?>">700 000<span></span></span>
                                    </div>
                                    </div>
            <?
                                    $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" => $arItem["DECIMALS"]? $arItem["DECIMALS"]: 0,
                                        "colorUnavailableActive" => 'colorUnavailableActive_'.$key,
                                        "colorAvailableActive" => 'colorAvailableActive_'.$key,
                                        "colorAvailableInactive" => 'colorAvailableInactive_'.$key,
                                    );
                                    ?>
                                    
                                    <script type="text/javascript">
                                        BX.ready(function(){
                                            window['trackBar<?=$key?>'] = new BX.Iblock.SmartFilter(<?=CUtil::PhpToJSObject($arJsParams)?>);
                                        });
                                    </script>
                                    <?
                                    bre

ak;