Ability to edit "Slider" field in the table view

[harinij]

Is your feature request related to a problem? Please describe. Currently, the slider field is only editable in the side drawer.

Describe the solution you'd like Ability to edit slider field in the main table view similar to the attached image using mui

[htuerker]

I'd rather see a popover editor here than the simple text editor.

I'll be working on this. Let me know if popover isn't an intended solution.

[shamsmosowi]

I think an interaction similar to this would be sweet

[htuerker]

@shamsmosowi I assume you wanted to put attention to how smooth the dragging experience is in that sandbox, right? The current slider can already achieve this smoothness by having a step value as low as possible.

In my opinion, it's better to stick with the MUI slider in order to have a consistent design. Do you have any opinions @notsidney?

https://user-images.githubusercontent.com/46192266/177175789-0cebdb75-df36-42c8-8662-087474a19ed4.mov

[notsidney]

I quite like the novelty of that solution as it looks really clean. However, it’s not keyboard accessible at all, and it’s not clear that you can click and drag on it. While I do like the consistency of using the MUI slider here, I think it would look too heavy in the table itself when there are 20 of them on screen.

I think it’s fine for you to implement what was suggested above. If you can find a way to make the input itself keyboard accessible, that would be great. You may have some luck implementing that style by restyling the MUI Slider, though it may be challenging. (Docs, API)

Known issue: Currently table cells with custom inputs (like selects) are not keyboard accessible as you cannot access the inputs themselves when you have a cell selected, because of the way we used react-data-grid. We have planned a rewrite of the table component itself to fix this. So just note that while the input you build will be keyboard accessible, an actual keyboard user won’t be able to access it for now.

[htuerker]

I think I understand what @shamsmosowi wants now. I'm going to create a simple draft PR with basic requirements then we can iterate it by discussing under.

A little intro:

https://user-images.githubusercontent.com/46192266/177256864-3d9d2738-7e9d-42ec-9f96-622cd11981b5.mov