Insert jQuerry Range Slider values in database using in AngularJS and Web API

How to insert the max & min range values into the database from range slider after selection of max and min values without using submit button in angularjs web api?

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
    crossorigin="anonymous">
    
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
    function formatDate(date) {
        var monthNames = [
        "January", "February", "March",
        "April", "May", "June", "July",
        "August", "September", "October",
        "November", "December"
    ];
        var monthIndex = date.getMonth();
        var year = date.getFullYear();
        return monthNames[monthIndex] + ' ' + year;
    }
    $(function () {
        $("#slider-range").slider({
            range: true,
            min: new Date('2019-01-01T00:00:00').getTime(),
            max: new Date('2019-12-01T00:00:00').getTime(),
            //step: 86400000,
            values: [new Date('2019-04-01T00:00:00').getTime(), new Date('2019-07-01T00:00:00').getTime()],
            slide: function (event, ui) {
                $("#amount").val(formatDate(new Date(ui.values[0])) + '-' + formatDate(new Date(ui.values[1])));
                $.ajax({
                    data: { MinValue: ui.values[0], MaxValue: ui.values[1] },
                    type: "post",
                    url: apiUrl + "/api/Warehouse/addMinMaxValues",
                    success: function (data) {
                        //alert("Data Save: " + data);
                    }
                });
            }
        });
        $("#amount").val(formatDate((new Date($("#slider-range").slider("values", 0)))) +
    " - " + formatDate((new Date($("#slider-range").slider("values", 1)))));
    });
</script>
<div>
    <p>
        <label for="amount">
            Month range:</label>
        <input type="text" id="amount" readonly style="border: 0; color: #f6931f; font-weight: bold;">
    </p>
    <div id="slider-range">
    </div>
</div>

[HttpPost]
[ActionName("addMinMaxValues")]
public int insertMinMaxDetails(rangeSlider rs)
{
    SqlConnection myConnection = new SqlConnection();
    myConnection.ConnectionString = ConfigurationManager.ConnectionStrings["ERPConnectionString"].ConnectionString;
    SqlCommand sqlCmd = new SqlCommand();
    DateTime now = DateTime.Now;
    sqlCmd.CommandType = CommandType.StoredProcedure;
    sqlCmd.CommandText = "INSERT_RANGE_SLIDER";
    sqlCmd.Connection = myConnection;
    sqlCmd.Parameters.AddWithValue("@MinValue", rs.MinValue);
    sqlCmd.Parameters.AddWithValue("@MaxValue", rs.MaxValue);        
    myConnection.Open();
    int rowInserted = sqlCmd.ExecuteNonQuery();
    myConnection.Close();
    return 1;
}