flowbase-range-slider.js

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

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


        $('#' + idOfSlider).css('display', 'none');
        $("<div></div>").insertAfter('#' + idOfSlider);

        var single = $('#' + idOfSlider).next()[0];
        noUiSlider.create(single, {
            start: [520],
            range: {
                'min': 300,
                'max': 740
            },
            step: 1,
            tooltips: [
                wNumb({decimals: 0,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');
        $("<div></div>").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>