How to use radio and range inputs as a filter

I am trying to make a "store", and I have made the design, and I wanted to make filters for it, but I am not sure how to code them. The in-store items are made using an array, and pushing the image, age and price info in that array. I made 4 radio buttons and named them to filter the age, and a range input to filter the price, any tips?

            #top {
                background-color: hotpink;
                height: 80px;
                display: flex;
                align-items: center;
                border-top-left-radius: 20px;
                border-top-right-radius: 20px;
                font-size: 20px;
                height: auto;
                max-width: 100%;
                position: fixed;
                width: 300px;
                height: 900px;
                border-right: solid;
                border-color: #9f2b68;
                border-right-width: 2px;
                padding-left: 15px;
                padding-top: 30px;
                margin: 10px;
                position: relative;
                display: grid;
                float: right;
                height: 850px;
                margin: 10px;
                grid-template-columns: 1fr 1fr 1fr;
                grid-gap: 1vh;
                border-style: solid;
                border-color: #9f2b68;
                margin: 10px;
                border-width: 2px;
            ::-webkit-scrollbar {
                display: none;
                background-color: #e2e3e3;
                padding-left: 30px;

        <div id="all">
        <div id="top">
            <span class="storetitle" id="strtitle">
            <a style="text-decoration:none"><span style="color:white;font-weight:bold">Store</span></a></span>
        <div id="filter">
        <div id="age">
            <p><input type="radio" id="radio1" name="godinebtn">0+</p>
            <p><input type="radio" id="radio2" name="godinebtn">3+</p>
            <p><input type="radio" id="radio3" name="godinebtn">6+</p>
            <p><input type="radio" id="radio4" name="godinebtn">10+</p>
        <div id="price">
            <p>0<input type="range">10.000</p>
        <div id="container"></div>
            let container = document.querySelector("#container");
            let toys = [];
            let i = 0;
            function toysinfo(image, years, price) {
                this.image = image;
                this.years = years;
                this.price = price;
            toys.push(new toysinfo("", "0+", "2000"));
            toys.push(new toysinfo("", "0+", "1500"));
            toys.push(new toysinfo("", "3+", "1500"));
            toys.push(new toysinfo("", "3+", "5000"));
            toys.push(new toysinfo("", "3+", "3000"));
            toys.push(new toysinfo("", "3+", "2000 RSD"));
            toys.push(new toysinfo("", "3+", "9000"));
             toys.forEach(t => {
                container.innerHTML += "<div class = 'item'><img src = " + t.image + ">" +
                                       "<p>" + t.years + " " + t.price + " " + "EUR" + "</p>"

            radio1.forEach((elem,i) =>{
                elem.addEventListener("input", ()=>{

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum