jQuery range increase variables-CodePudding

I have difficulty how to do that:

I have job duration (range slider)
4 variables:
- first hour - £30
- 30 min - £15
- every next hour - £20
- 30 min - £10

I've tried with array and the correct price for each hour (max 8hours), but if I change some of the prices I have to change (recalculate) all the array. So how can I make it that way:

if slider val is 0 - £30 (1 hour)
if slider val is 1 - $45 (1h 30min)
if slider val is 2 - £50 (2 hours)
if slider val is 3 - £60 (2h 30min)
and so on.

var duration_array = ['1 Hour 00 Minutes', 
                        '1 Hour 30 Minutes',
                        '2 Hours 00 Minutes',
                        '2 Hours 30 Minutes',
                        '3 Hours 00 Minutes',
                        '3 Hours 30 Minutes',
                        '4 Hours 00 Minutes',
                        '4 Hours 30 Minutes',
                        '5 Hours 00 Minutes',
                        '5 Hours 30 Minutes',
                        '6 Hours 00 Minutes',
                        '6 Hours 30 Minutes',
                        '7 Hours 00 Minutes',
                        '7 Hours 30 Minutes',
                        '8 Hours 00 Minutes'
                        ];

$(document).on('input', '#duration_slider', function() {
    var value = $(this).val();
    $('#duration_output').html(duration_array[value]);

    var a = 51;
    var b = 25.50;
    var c = 39;
    var d = 19.50;
});

CodePudding user response：

As I understand it you have 2 pricing rules:

when the time is less than 2 hours, it is just hours * £30;
when the time is 2 hours, it is the cost of the first hour, plus extra hours * £20;

Checking the docs for range inputs, we can also use a step attribute. Since your pricing goes up in half-hour increments, we can use a step value of 0.5 to get exactly how many hours you need to charge for.

So putting that all together:

$(document).on('input', '#duration_slider', function() {
    // Use parseFloat to make sure hours is a number so we can do math with it
    var hours = parseFloat($(this).val());
    var cost = 0;
    
    $('#hours').html(hours);
    
    if (hours < 2) {
        cost = hours * 30;
    } else {
        // Cost of first hour is 30; calculate the remaining cost 
        // and add it to the first hour cost.
        hours = hours - 1;
        cost = (hours * 20)   30;
    }

    $('#duration_output').html(cost);
});

input {
    width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" value="1" min="1" max="8" step="0.5"  id="duration_slider">

<div>
    <p>Hours: <span id="hours">1</span></p>
    <p>Cost: £<span id="duration_output">30</span></p>
</div>

CodePudding user response：

It looks like you just need to look at the index number of the slider and convert it to your final price:

var duration_array = [
    '1 Hour 00 Minutes', 
    '1 Hour 30 Minutes',
    '2 Hours 00 Minutes',
    '2 Hours 30 Minutes',
    '3 Hours 00 Minutes',
    '3 Hours 30 Minutes',
    '4 Hours 00 Minutes',
    '4 Hours 30 Minutes',
    '5 Hours 00 Minutes',
    '5 Hours 30 Minutes',
    '6 Hours 00 Minutes',
    '6 Hours 30 Minutes',
    '7 Hours 00 Minutes',
    '7 Hours 30 Minutes',
    '8 Hours 00 Minutes'
];

$(document).on('input', '#duration_slider', function() {
    var value = parseInt( $(this).val() );
    $('#duration_output').html(duration_array[value]);

    let price;
    switch ( value ) {
        case 0:
            price = 30;
            break;
        case 1:
            price = 45;
            break;
        default:
            price = (value * 25) - 15 * (value - 2)
            break;
    }
    
    $('#price_output').html(price);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="range" min="0" max="14" id="duration_slider">
<br>
<div id="duration_output"></div>
$<span id="price_output"></span>