How to make specific range search filters in lwc & apex?

Question

I'm a freshman who just started developing apex and lwc.

I'm developing a search filter.The hard part is this.
After searching for a number, it is a logic that allows all values within the error range to be inquired.

I would like to know how to modify the value within the range by specifying the range.

<lighting-input> tag with name="caseNumber", value={caseNumber} is the tag for entering the first search number and tag with name="caseNumber2", value={caseNumber2} in specifying an error range.

Salesforce development masters, help me!

My HTML and JS code

HTML

    <template>
        <lightning-card variant="Narrow">
            <lightning-layout multiple-rows>
                <lightning-layout-item
                    size="12"
                    padding="around-small"
                >
                    <table class="slds-table slds-table_cell-buffer slds-table_bordered">
                        <thead>
                            <tr class="slds-line-height_reset">
                                <td scope="col">
                                    <lightning-input
                                        type="number"
                                        variant="standard"
                                        name="caseNumber"
                                        value={caseNumber}
                                        placeholder="Document Number Search"
                                        onkeyup={handleKeyUp}
                                    ></lightning-input>
                                 <lightning-input
                                    type="number"
                                    variant="standard"
                                    name="caseNumber2"
                                    value={caseNumber2}
                                    placeholder="The Margin Of Error Search"
                                    onkeyup={handleKeyUp2}
                                ></lightning-input>
                                </td>
                                <td scope="col">
                                    <lightning-input
                                        type="text"
                                        variant="standard"
                                        name="accountName"
                                        value={accountName}
                                        placeholder="Document Titlle Search"
                                        onkeyup={handleKeyUp}
                                    ></lightning-input>
                                </td>
                            </tr>
                            
                            <tr class="slds-line-height_reset">
                                <th scope="col">No.</th>
                                <th scope="col">Document Number</th>
                                <th scope="col">Document Titlle</th>
                            </tr>
                        </thead>
                    
                        <tbody>
                            <tr
                                class="slds-hint-parent"
                                for:each={searchable}
                                for:item="item"
                                key={item.Id}
                            >
                                <td scope="col">{item.index}</td>
                                <th scope="row">
                                    <a
                                        href="#"
                                        onclick={handleNavigate}
                                        data-id={item.caseData.Id}
                                    >{item.caseData.CaseNumber}
                                    </a>
                                </th>
                            </tr>
                        </tbody>
                    </table>
                </lightning-layout-item>
            </lightning-layout>
        </lightning-card>
    </template>

JS

import { LightningElement, wire, track } from "lwc";
import getCases from "@salesforce/apex/FilteredTableController.getCases";
import { NavigationMixin } from "lightning/navigation";
import { getPicklistValues } from "lightning/uiObjectInfoApi";


export default class FilteredTable extends NavigationMixin(
    LightningElement
) {
    @track data;
    searchable = [];
    wiredCaseCount; 
    wiredCases;

    doneTypingInterval = 0;

    searchAllValue;

    caseNumber = "";
    accountName = "";
    contactName = "";


    @wire(getCases, {
        caseNumber: "$caseNumber",
        accountName: "$accountName",
        contactName: "$contactName",
    })
    wiredSObjects(result) {
        this.wiredCases = result;
        console.log("4", result.data[1]);
        if (result.data) {
            this.searchable = this.data = result.data.map((caseObj, index) => ({
                caseData: { ...caseObj },
                index: index + 1,
                rowIndex: index
            }));
        } else if (result.error) {
            console.error("Error", error);
        }
    }

    handleChange(event) {
        this[event.target.name] = event.target.value;
    }

    handleKeyUp(event) {
        clearTimeout(this.typingTimer);
        let value = event.target.value;
        let name = event.target.name;

        this.typingTimer = setTimeout(() => {
            this[name] = value;
        }, this.doneTypingInterval);
    }



    handleSearchAll(event) {
        this.searchAllValue = event.target.value;
        this.searchAll();
    }

    searchAll() {
        let searchStr = this.searchAllValue.toLowerCase();
        const regex = new RegExp(
            " (^" + searchStr + ") | (." + searchStr + ") | (" + searchStr + "$) "
        );
        if (searchStr.length > 2) {
            this.searchable = this.data.filter((item) => {
                if (
                    regex.test(
                        item.caseData.CaseNumber.toLowerCase() +
                            " " +
                            item.caseData.CaseNumber.toLowerCase()
                    ) ||
                    regex.test(
                        item.caseData.Account?.Name?.toLowerCase() +
                            " " +
                            item.caseData.Account?.Name?.toLowerCase()
                    ) ||
                    regex.test(
                        item.caseData.Contact?.Name?.toLowerCase() +
                            " " +
                            item.caseData.Contact?.Name?.toLowerCase()
                    ) 
                ) {
                    return item;
                }
            });
        } else if (this.caseNumber.length <= 2) {
            this.searchable = this.data;
        }
        console.log(this.searchable);
    }

    handleNavigate(event) {
        event.preventDefault();
        this[NavigationMixin.Navigate]({
            type: "standard__recordPage",
            attributes: {
                actionName: "view",
                recordId: event.target.dataset.id
            }
        });
    }
}

Apex

public with sharing class FilteredTableController {
    @AuraEnabled(cacheable=true)
    public static List<Case> getCases(
        String caseNumber,
        String accountName,
        String contactName,
    ) {
        String query;
        String condition = (String.isNotBlank(caseNumber)
            ? 'CaseNumber LIKE \'' + '%' + caseNumber + '%\''
            : '');

        condition += (String.isNotBlank(accountName)
            ? (String.isNotBlank(condition) ? +' AND ' : '') +
              ' Account.Name LIKE \'' +
              '%' +
              accountName +
              '%\''
            : '');

        condition += (String.isNotBlank(contactName)
            ? (String.isNotBlank(condition) ? +' AND ' : '') +
              ' Contact.Name LIKE \'' +
              '%' +
              contactName +
              '%\''
            : '');


        System.debug('condition ' + condition);
        if (String.isNotBlank(condition)) {
            query =
                'SELECT CaseNumber, Account.Name,Contact.Name FROM Case WHERE ' +
                condition +
                ' ORDER BY CaseNumber';
        } else {
            query = 'SELECT CaseNumber,Account.Name,Contact.Name FROM Case ORDER BY CaseNumber LIMIT 200';
        }

        List<Case> records = Database.query(query);
        return records;
    }
}