I’m new to react and I’m connecting a react front end to a flask backend. I’m in a group project but I’ve been somehow responsible for 90% of the work. I’ve implemented the fields with MUI but I’m flexible and prefer working over appearance.
I made a form with react-form-hooks and tried to implement a custom range slider (I’m sorry that it’s not all broken out to components and is mainly single file). I’m new to React, JS and TSX (there’s a sandbox at the bottom of the post).
*Side-note: the form is loading pretty slow right now, any tips on improving performance would be greatly appreciated. (: (Actually at this point appreciative for any ideas and open to feedback).
What I am trying to achieve:
I am trying to take input as a range of values from 0 to 100 in a form. The values can be passed as [0,100] on default or if they are updated, on pressing submit the current values ([min, max]) of their state would be submitted. The information would be passed as a json response to an api backend through a post request.
I found some options online on implementing a range slider with react-hooks-form but could not get any of them to work unfortunately. Could someone please help me implement the range slider (I will need to use 3 of them in my form)?
If this is not possible, could you please assist with one of the following alternatives:
Option 1: Setting up a select box/combo-box that does the following:
Provides the user a max or min option based off the corresponding max/min option. I.e. if there is no input in either the Max or Min select/combo-box: Then both boxes would have 0-100 as the possible range of values. If the value of one box was touched: then the second select/combo fields values would be of the corresponding remainder of the range.
E.g. If I selected 70 for my minimum value my other select/combo would provide for me to either leave it blank, or give me the options 70 to 100. Or if I selected 82 for the max input field- the select for min would only allow me to use 0 to 82 for my min or leave it blank.
Option 2: Text input fields with the same validation schema as above that would become an error state if the user entered something like: artist-rating min: 40 artist-rating max: 20
Here is the sandbox:
Thanks for updating the post.
You problem is that Mui Slider Component, doesn't take the default input props, so you can't spread the register method returned by react-hook-form since it returns the default value and onChange props.
But react-hook-form is a great library and it already addressed the integration with the main react UI libs: https://react-hook-form.com/get-started#IntegratingwithUIlibraries
I implemented a basic example here: https://codesandbox.io/s/wonderful-silence-9qlfbj?file=/src/App.js They expose quite extensive and clear APIs, take your time to study them if you plan to use it as your form management library.
