search

anse-app / anse

Supercharged experience for multiple models such as ChatGPT, DALL-E and Stable Diffusion.
https://anse.app
MIT License
1.85k stars 437 forks source link

Feat/settings slider text input #107

Closed eliassebastian closed 10 months ago

eliassebastian commented 11 months ago

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:

https://github.com/anse-app/anse/assets/12883356/2ebd393a-3250-456b-a42c-74240760a53c

After:

https://github.com/anse-app/anse/assets/12883356/d2aaa535-fa62-4e20-b9e7-7c2c45f777e3

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[bot] commented 11 months ago

Deploy Preview for chatgpt-demo-v2 failed.

Name Link
Latest commit fce92e603fff6b2cb05bbdc26c6f9f5849aacf11
Latest deploy log https://app.netlify.com/sites/chatgpt-demo-v2/deploys/65343510e5ede400088bcb38
ddiu8081 commented 10 months ago

Thanks!