Hello Everyone today i will discuss how you can create filter with different form elements like checkbox,input,select and slider.
I will provide the entire code through codesandbox and Explain the main points here.

Let's get started...

Main Points About the Component

• Firstly i created a form with 4 elements input type of number, a checkbox, a select input and a slider range from 100-1000 with steps of 100.
• Then i created 4 states for these inputs and attached the event listener to all these inputs to change the state of the filters.
• Input, checkbox and select has an "onChange" event listener and slider has a "onInput" event listener to change the state on every slide.
• For the data, i have created an array of object with 3 properties id for the "key" attribute in map function, type for the color value either green or red number, value which is the value used to display the number using map.
• To apply the filters, i have chained the filter method with map method so that it will apply all the filters together.

{
 dummyData
    .filter((item) => item.value > value)
    .filter((item) => item.value > higherValue)
    .filter((item) => item.value > Number(search))
    .filter((item) => {
       if (colorChecker === "") return item;
          return item.type === colorChecker;
       })
    .map((item) => {
         return (
           <div
             key={item.id}
             className={item.type === "red" ? "text-red" : "text- 
             green"} >
              <p>{item.value}</p>
          </div>
        );
 })}

• There is a reset filter button which will reset all the filters applied.
• For the styling part you can check the CSS file its not a complex styling, just a simple one.

THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd

https://dev.to/shubhamtiwari909/theme-changer-with-html-and-css-only-4144

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90