Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Separation in input field #768

Open
MaulikCodework opened this issue Nov 22, 2021 · 2 comments
Open

Separation in input field #768

MaulikCodework opened this issue Nov 22, 2021 · 2 comments
Assignees
Labels
Help wanted Person asking for help

Comments

@MaulikCodework
Copy link

MaulikCodework commented Nov 22, 2021

Hello @IonDen
I want to use the range slider for the price but in the input field its take a direct number so we can't readable properly price value so any js changes for some space or comma for value like($1000 but I want it $1 000 or $1,000);
https://prnt.sc/20iiywu

Thank you

@MaulikCodework MaulikCodework added the Help wanted Person asking for help label Nov 22, 2021
@ghost
Copy link

ghost commented Dec 4, 2021

Hello @MaulikCodework , I'm looking for the same solution.
Did you managed to find any solution?

Thank you

@IonDen
Copy link
Owner

IonDen commented Jan 5, 2022

Hey guys. @MaulikCodework, @Rajiv5132.

General rule is - in slider I show prettified parameters like $1,000, but input receives plain number 1000.
This is done so, because these numbers could be used for other calculations in different parts of your project business logic.

But, if you really want the input field with prettify applied to it - you will have to do it yourself as a separate functionality.
But you will need to do a double mutation of that value from number 1000 to string 1,000 and back.

Prettify function used in slider is looking like this:

function prettify (num, separator) {
  let n = num.toString();
  return n.replace(/(\d{1,3}(?=(?:\d\d\d)+(?!\d)))/g, "$1" + separator);
}

// and now you can do a mutation

prettify(1000, ' '); // 1 000
prettify(10000, ','); // 10,000

You could apply it to any input field.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Help wanted Person asking for help
Projects
None yet
Development

No branches or pull requests

2 participants