Обновить переменную sliderStates после изменения min и max значений

com_aleksei_jscomponent_web_toolkit_ui_slider_SliderServerComponent = function () {
    var connector = this;
    var element = connector.getElement();
    var state = connector.getState();


    $(element).html("<div class=\"main\">\n" +
        "  <input\n" +
        "      type=\"range\"\n" +
        "      class=\"slider\"\n" +
        "      name=\"participants\"\n" +
        "      id=\"rangeId\"\n" +
        "      min=\"1\"\n" +
        "      max=\"100\"\n" +
        "  >\n" +
        "  <span class=\"rangeslider__tooltip\" id =\"range-tooltip\"></span>\n" +
        "<div class=\"mydiv\"></div> \n" +
        "</div> \n"
    );

    setValues();

    const $element = $('input[type="range"]');
    const $tooltip = $('#range-tooltip')

    let sliderStates = [
        {
            name: "low",
            tooltip: "Great, we're confident we can complete your project within <strong>24 hours</strong> of launch.",
            range: _.range(state.minValue, state.maxValue / 3)
        },
        {
            name: "med",
            tooltip: "Looks good! We can complete a project of this size within <strong>48 hours</strong> of launch.",
            range: _.range(state.maxValue / 3, (state.maxValue / 3) * 2)
        },
        {
            name: "high",
            tooltip: "With a project of this size we'd like to talk with you before setting a completion timeline.",
            range: _.range((state.maxValue / 3) * 2, state.maxValue + 1)
        },
    ];

    var currentState;
    var $handle

    $element
        .rangeslider({
            polyfill: false,
            onInit: function () {
                $handle = $('.rangeslider__handle', this.$range);
                updateHandle($handle[0], this.value);
                updateState($handle[0], this.value);
            }
        })
        .on('input', function () {
            updateHandle($handle[0], this.value);
            checkState($handle[0], this.value);
        });

    //update value
    connector.updateValue = function (val) {
        $element.val(val).change();

        sliderStates.val()

    }
    //update min
    connector.updateMin = function (min) {
        let attributeMin = {
            min: min,
        };
        $element.attr(attributeMin).rangeslider('update', true);
    }
    //update max
    connector.updateMax = function (max) {
        let attributeMax = {
            max: max,
        };
        $element.attr(attributeMax).rangeslider('update', true);
    }

    //Set value to slider value
    function setValue(value) {
        $element.val(value).change();
    }

// Update the value inside the slider handle
    function updateHandle(el, val) {
        el.textContent = val;
    }

// Check if the slider state has changed
    function checkState(el, val) {
        // if the value does not fall in the range of the current state, update that shit.
        if (!_.contains(currentState.range, parseInt(val))) {
            updateState(el, val);
        }
    }

    //set values to slider
    function setValues() {
        document.getElementById("rangeId").min = state.minValue;
        document.getElementById("rangeId").max = state.maxValue;
        document.getElementById("rangeId").value = state.value;
    }

// Change the state of the slider
    function updateState(el, val) {
        for (var j = 0; j < sliderStates.length; j++) {
            if (_.contains(sliderStates[j].range, parseInt(val))) {
                currentState = sliderStates[j];
                // updateSlider();
            }
        }

        // Update handle color
        $handle
            .removeClass(function (index, css) {
                return (css.match(/(^|\s)js-\S+/g) || []).join(' ');
            })
            .addClass("js-" + currentState.name);
        // Update tooltip
        $tooltip.html(currentState.tooltip);
    }
}