JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<div>
    <div><input type="text" id="date" /></div>
    <p>
        <label for="price">Cost: £</label>
        <input type="number" id="price" value="0" max="1000" />
    </p>
    <div id="slider1"></div>
    <form class="Fruit">
        <input type="checkbox" id="banana" class="fruit" name="fruit" value= "25" />Banana<br />
        <input type="checkbox" class="fruit" name="fruit" value="75" />Apple<br />
        <input type="checkbox" class="fruit" name="fruit" value="172" />Melon<br />
        <input type="checkbox" class="fruit" name="fruit" value="400" />Leopard<br />
        <input type="checkbox" class="fruit" name="fruit" value="328" />Grimacing
    </form>
</div>

JavaScript

$(function () {
    
    var fruit = [],
        //Calls to jQuery $(...) are expensive! make sure you cache these calls when appropriate
        $price = $('#price'),
        $slider = $('#slider1'),
        $fruit = $('.fruit'), 
        $date = $('#date'); 
    
    $date.datepicker();
    
    //Iterate over every element with the class fruit (these should all be inputs)
    $fruit.each(function(index, item){
        //convert to a jQuery object
        var checkbox = $(item); 
        //push the checkbox into the fruit array as an object with its value
        //parseInt defaults to base 8 so be sure to specify base 10.
        fruit.push({ val: parseInt(checkbox.val(), 10), checkbox: checkbox}); 
    }); 
    
    $slider.slider({
        max:1000,
        min:0,
        value: 0,
        slide: function(event,ui){
            $price.val(ui.value);
            
            $.each(fruit, function(index, item){
                //not sure what you want to compare here? event.clientX or ui.value
                item.checkbox.prop("checked", item.val > ui.value);
            }); 
        }
    });
    
    //I did not validate any of the below is working correctly. 
    $price.change(function(){
        $slider.slider("value", $(this).val())
        $price.val($(this).val());
    });
    
    var fTotal = 0;
    $fruit.click(function(){
        if (this.checked){
            fTotal += parseInt($(this).val(), 10);
            $slider.slider("value", fTotal )
            $price.val(fTotal);
        }
        else {
            fTotal -= parseInt($(this).val(), 10);
            $slider.slider("value", fTotal )
            $price.val(fTotal);
        };
    });
});