EditableSlider UI/UX improvements

[dalthviz]

Fixes #484

Example code

import panel as pn
import panel_material_ui as pmui

pn.extension()

pn.pane.Markdown("## Inline layout: True").servable()

int_slider = pmui.EditableIntSlider(label='Integer Slider', start=0, end=8, step=2, value=4)
int_slider.servable()

range_slider = pmui.EditableRangeSlider(
    label='Editable Slider', start=0, end=3.141, step=0.01, value=(0, 1.57)
)

range_slider.servable()

pn.pane.Markdown("## Inline layout: False").servable()

int_slider_base = pmui.EditableIntSlider(label='Integer Slider', start=0, end=8, step=2, value=4, inline_layout=False)
int_slider_base.servable()

range_slider_base = pmui.EditableRangeSlider(
    label='Editable Slider', start=0, end=3.141, step=0.01, value=(0, 1.57), inline_layout=False
)

range_slider_base.servable()

A preview

Notes

• While I was commiting this, although the pre-commit hook didn't show any error/did any fix, tested running pixi run pre-commit-run and some style errors over NumberInput.jsx where shown/fixed. Checking the README of the pre-commit eslint hook (https://github.com/pre-commit/mirrors-eslint) seems like by default it only checks .js files so maybe there is a need to config the eslint hook explicitly to check instead for .jsx files? 🤔 If a PR fixing that is required let me know! Worked on PR chore: Update pre-commit and fixes #502

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 78.53%. Comparing base (e54212f) to head (c0063d1).

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #501   +/-   ##
=======================================
  Coverage   78.52%   78.53%           
=======================================
  Files          31       31           
  Lines        2938     2939    +1     
=======================================
+ Hits         2307     2308    +1     
  Misses        631      631           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[philippjfr]

by default it only checks .js files so maybe there is a need to config the eslint hook explicitly to check instead for .jsx files? 🤔 If a PR fixing that is required let me know!

That explains, would welcome a PR.

[dalthviz]

Checking I think there is already a PR taking care of fixing the NumberInput fixes + updating hook versions so probably in that PR adding the mentioned change to the eslint hook could make sense. Left a comment there with the eslint hook changes info #502 (comment)

[dalthviz]

Note: Seems to me that the failing tests here are not related with the changes done but let me know if I should take a closer look to them!