Feat/settings slider text input

[eliassebastian]

Description

This PR simply improves the existing settings slider component by allowing users to directly input a slider's value. Previously, users would only interact with the slider via dragging the handle. Now, they have the option to either input the value manually through a text input or continue using the slider in the traditional manner. This improves user experience when interacting with the settings slider if precision is needed, or if the user prefers to input the intended value directly.

Before:

Screen.Recording.2023-10-21.at.19.34.35.mov

After:

Screen.Recording.2023-10-21.at.19.39.25.mov

Linked Issues

No linked issues.

Additional context

1. A new utility function adjustValueToStep has been added to make sure the inputted values are within a valid range and adhere to the set step size.
2. The current default behaviour (i.e., not allowing manual input) is maintained if the prop canEditSliderViaInput is explicitly set to false. I've set it to true by default.

[netlify]

❌ Deploy Preview for chatgpt-demo-v2 failed.

Name	Link
🔨 Latest commit	fce92e6
🔍 Latest deploy log	https://app.netlify.com/sites/chatgpt-demo-v2/deploys/65343510e5ede400088bcb38

[ddiu8081]

Thanks!