This is my thought..

• If "between" is used 2 text input boxes would get rendered next to each other having a class that is customizable. Maybe, it can take the same class style as rule-value (but have a different name like rule-between-value ?)
• The seperator like "and" could be used in the SQL or other query outputs but instead of taking comma seperated values, it will take values from the 2 text input boxes. If the "and" is used (Field between X and Y), it will be as close as possible to query language rather than using Field between X Y
• I'm not sure what you mean by full-blown component and translatable string here
• I would assume it should show "" by default and when user inputs the values in the 2 input text boxes, it will render the "and" and show the values
• I would say, it should be configurable by field

I am still thinking about the answers for the last 2 questions.

I started PR #431 that implements the two-input variation for the default ValueEditor (and the Bootstrap counterpart as well...others to come later) when the operator is "between" or "notBetween".

You can try out the new build here: https://codesandbox.io/s/react-querybuilder-pr-431-test-cyj6rp?file=/src/App.tsx

As to your questions:

• If "between" is used 2 text input boxes would get rendered next to each other having a class that is customizable. Maybe, it can take the same class style as rule-value (but have a different name like rule-between-value ?)

The wrapper element has the rule-value class, and each input has the rule-value-list-item class. The new class is named that in case we consider adding support for "in"/"notIn" later.

• The seperator like "and" could be used in the SQL or other query outputs but instead of taking comma seperated values, it will take values from the 2 text input boxes. If the "and" is used (Field between X and Y), it will be as close as possible to query language rather than using Field between X Y

I added a getValueEditorSeparator prop which takes a field and operator and should return a ReactNode (element, string, etc.) that gets inserted in between the two inputs. Usage:

<QueryBuilder
  getValueEditorSeparator={(fld, op) => "and"}
/>
// OR
<QueryBuilder
  getValueEditorSeparator={(fld, op) => (<span className="my-class">and</span>)}
/>

• I'm not sure what you mean by full-blown component and translatable string here

I went with "component"--see previous bullet.

• I would assume it should show "" by default and when user inputs the values in the 2 input text boxes, it will render the "and" and show the values

It's not dynamic, it either displays for the given field/operator combination or it doesn't.

• I would say, it should be configurable by field

...and operator! :)

Have a go with the CodeSandbox and let me know what you think.

This looks perfect.. I will play around a bit with the CodeSandbox version you created. Thank you so very much @jakeboone02 !

@jakeboone02 - This was deployed to v6 on Jan 09th right ?

@jakeboone02 - This was deployed to v6 on Jan 09th right ?

I don't remember when it was originally published but yes, it's in v6. See #455.