how to use range slider as input and store values in variable?

how to use range slider as input and store values in variable?

Hello all,

I'm new to all this and i'm trying to build a website where i use range sliders as input from which i need to value to be made visible in a chart (i'm using chartjs). For the moment i'm stuck with capturing the values from the range slider. For some reason it keeps returning an empty array for the min and max variables although the input field gets a value that updates when using the slider. Can anyone help me with this? Thanks!

code:

<body>
    
<p id="monday">
    <label for="amountmonday">Hours of sleep:</label>
    <input type="text" id="amountmonday">
</p>
  
<div id="slidermonday"></div>

<script>
    
var amountmonday = $('#amountmonday');
var slidermonday = $('#slidermonday');
var max = $('slidermonday').slider('values', 1);
var min = $('slidermonday').slider('values', 0);


    
    $(function() {
        slidermonday.slider({
            range:true,
            min: 0,
            max: 24,
            values: [12, 18],
            slide: function Total (event, ui) {
                amountmonday.val(ui.values[1] - ui.values[0]);
                
        $( "#amountmonday" ).val(  $( "#slidermonday" ).slider( "values", 1 ) - $( "#slidermonday" ).slider( "values", 0));
            },
    
    });
});
 
       
</script>