Ajax Query not working with range sliders in Laravel

I am trying to get value from range slider and update my database using ajax but it is giving me 404 status error. I am using Laravel.

This is my route

Route::post('developer/work-progress/changeProgess','DeveloperController@changeProgess');

here is the html code

<div class="form-group row themered">
                    <label for="range_02" class="col-sm-2 col-xs-12 control-label"><b>Back-End</b><span class=" font-13 d-block text-muted clearfix">Set backend progress</span></label>
                    <div class="col-sm-10 col-xs-12">
                        <input type="text" id="range_01" name="frontend_percent">
                    </div>
                </div>

                <div class="form-group row themered">
                    <label for="range_02" class="col-sm-2 col-xs-12 control-label"><b>Front-End</b><span class=" font-13 d-block text-muted clearfix">Set frontend progress</span></label>
                    <div class="col-sm-10 col-xs-12">
                        <input type="text" id="range_02" name="backend_percent">
                    </div>
                </div>

                <div class="form-group">
                    <input class="progressId" type="hidden" name="id" value="">
                </div>

                <div>

                    <button class="btn btn-info changeProgress">Change</button>

                </div>

Here is my jquery code

  var frontend  = $('#range_01').val();
    var backend  = $('#range_02').val();

    $('#range_01').change(function () {
         frontend = $(this).val();
    });

    $('#range_02').change(function () {
        backend = $(this).val();

    });

    $('.changeProgress').click(function () {

        $.ajax({

            type: 'post',
            url: 'work-progress/changeProgress',
            dataType: 'json',

            data: {

                'frontend_percent' : frontend,
                'backend_percent' : backend,
                'id':   $('.progressId').val(),

            },

            headers: {"X-CSRF-Token": token},

            success : function (data) {
                console.log("worked");
            }

        });

    });

and this is the controller function

public function changeProgess(Request $request) {

    $data = Order::findOrFail($request->id);

    $data->frontend_percent = $request->frontend_percent;
    $data->backend_percent =  $request->frontend_percent;

    $data->save();

    return response()->json($data);

}

I can see my data in network tab when I inspect as well as the csrf-token. So I don't know where the problem is.

via Chebli Mohamed