How to update variable on event of html value changing?

Unfortunately no success. Attached screenshot of puzzles.

Here is the slider code:

<link href=”https://refreshless.com//nouislider/dist/nouislider.css?v=1550&#8243; rel=”stylesheet”>
<style>
/* Here you can change the root styles to suit your own brand */
:root {
–tooltip-height: 32px;
–tooltip-color: #000;
–tooltip-bg-color: #FBFCFE;
–tooltip-border-color: #E4E6F1;
–tooltip-corner-radius: 8px;
–tooltip-box-shadow: 0px 8px 20px rgba(141, 155, 190, 0.16);

–handle-height: 24px;
–handle-width: 24px;
–handle-box-shadow: 0px 8px 20px rgba(141, 155, 190, 0.16);
–handle-color: #b4b4b4;

–range-bar-height: 18px;
–range-bar-corner-radius: 20px;
–range-bar-color: #642EFF;
–range-box-shadow: 0px 8px 20px rgba(141, 155, 190, 0.16);
}

/* -150% will show tool-tips at the bottom, you can swap these to top via the % amount. */
.noUi-tooltip.bottom {
bottom: 150%;
}
/* These are some styles for the range bar, for example the 2px inner-shadow. Or the corner ends */
.noUi-target {
background: #E4E6F1;
border-radius: 32px;
border: 0;
box-shadow: 0px 3px 2px -2px #1B114A14 inset;
}
.noUi-connects{
overflow: initial;
}
.noUi-connect {
background: var(–range-bar-color);
box-shadow: var(–range-box-shadow);
}

.noUi-handle {
width: var(–handle-width) !important;
height: var(–handle-height) !important;
border-radius: 50%;
border: 0;
box-shadow: none;
box-shadow: var(–handle-box-shadow);
cursor: pointer;
top: -3px !important;
background: var(–handle-color);
}

.noUi-handle:before,
.noUi-handle:after {
display: none
}
.noUi-horizontal{
height: var(–range-bar-height);
}
.noUi-tooltip {
height: var(–tooltip-height);
background: var(–tooltip-bg-color);
border: 1px solid var(–tooltip-border-color);
box-sizing: border-box;
box-shadow: var(–tooltip-box-shadow);
border-radius: var(–tooltip-corner-radius);
}
</style>

<script src=”https://refreshless.com/nouislider/dist/nouislider.js?v=1550″></script&gt;
<script type=”text/javascript” src=”https://cdn.jsdelivr.net/jquery/latest/jquery.min.js”></script&gt;
<script src=”https://refreshless.com/nouislider/documentation/assets/wNumb.js”></script&gt;

<script>
$(function () {
//THIS IS FOR THE SINGLE SLIDER
let idOfSlider = ‘slider-single’;
let idOfSliderValue = ‘slider-single-value’;

$(‘#’ + idOfSlider).css(‘display’, ‘none’);
$(“

“).insertAfter(‘#’ + idOfSlider);

var single = $(‘#’ + idOfSlider).next()[0];
noUiSlider.create(single, {
start: [520],
range: {
‘min’: 0.1,
‘max’: 1
},
step: 0.01,
tooltips: [
wNumb({decimals: 1.00,prefix: ”}),
],
});
var valueSingle = document.getElementById(idOfSlider);
single.noUiSlider.on(‘update’, function (values) {
$(‘#’ + idOfSlider).val(values);
$(‘#’ + idOfSliderValue).text(values);
});
$(‘[data-tooltip-pos]’).next().children().find(‘.noUi-tooltip’).addClass(‘bottom’)

//THIS IS FOR THE RANGE SLIDER.
//Sorry for yelling…
let idOfRangeSlider = ‘slider-range’;

$(‘#’ + idOfRangeSlider).css(‘display’, ‘none’);
$(“

“).insertAfter(‘#’ + idOfRangeSlider);

var range = $(‘#’ + idOfRangeSlider).next()[0];

noUiSlider.create(range, {
connect: true,
start: [10000, 18000],
range: {
‘min’: 1000,
‘max’: 20000
},
step: 500,
tooltips: [
wNumb({decimals: 2,prefix: ‘$’}),
wNumb({decimals: 2,prefix: ‘$’}),
],
});
range.noUiSlider.on(‘update’, function (values) {
$(‘#’ + idOfRangeSlider).val(values.join(‘ – ‘));
});
});

</script>