JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider_months" style="margin-top:10px;"></div>
<div id="header_months"></div>

JavaScript

$("#slider_months").slider({
    range: "min",
    value: 48,
    min: 12,
    max: 60,
    step:2,
    slide: function (event, ui) {
        $("#header_months").html(ui.value);
    },
    change: function (event, ui) {
        $("#header_months").html(ui.value);
        var mod = ui.value % 12;
        if (mod != 0) {
            if (mod < 6) {
                $("#slider_months").slider({
                    value: Math.floor(ui.value / 12) * 12
                });

            } else if (mod >= 6) {
                $("#slider_months").slider({
                    value: Math.ceil(ui.value / 12) * 12
                });
            }
        }
    }
});