Currency format for range slider input form?

I have a form with several inputs. I’d like to use currency from a range slider in a few places, I understand I could convert the input to currency outside of the form, but wondering if I can do so within the form? The code below isn’t working:

form = Inputs.form({
  option1: Inputs.checkbox(["A", "B"], { label: "Select some" }),
  Rent: Inputs.range([0, 10000], {
    label: "Rent",
    step: 50,
    format: (value) =>
      value.toLocaleString({
        style: "currency",
        currency: "USD"
      }) // Format the value as currency
  }),

Also, I plan to manipulate the inputs (perform calculations on the inputs) does that alter best practices as to whether I should convert to a Currency sooner, vs at the end of the process? Any pointers would be appreciated.

I think the issue with converting in the format function is that the output of toLocaleString is a string, but the range input requires the result of the format function to be a valid floating point number:

The format option allows you to specify a function that is called to format the displayed number. Note that the returned string must be a valid floating-point number according to the HTML specification; no commas allowed!

Personally, I think it’s best to leave numbers as numbers until you’re ready to display them.

1 Like

Thanks - I agree it seems to make sense to not start touching the format until the final presentation, the only downside to that is when using form/inputs the presentation is somewhat occurring at the time that the user is adjusting the inputs.

In my situation, I have one slider for dollars and another for percent, and they both just show a number, so it looks a bit odd, but I think we just have to roll with it for now.

The old Inputs collection that was commonly used before the current Inputs library got introduced has a slider that lets you format the displayed value:

2 Likes

Oh great - so now I have to edit all my existing inputs! (j/k - thank you for this!!)

Related question:

Is there a best practice for repeating the same input in a notebook? I have variable X that I want to use at the beginning and midway through to illustrate two different concepts that are related, so I want to have a range input for X in two locations, and either of these will update X.

Is this where binding comes into play, or is there a better approach to this?

Inputs.bind is the right approach, but you’ll want to make sure that you treat any bound inputs as “remote controls” for your primary input, which should remain the only of these inputs that is a named cell. You’ll likely also want to create a factory function that returns a new preconfigured input, so that you don’t have to repeat the code for every instance.

However, there’s a problem with those old Inputs: They don’t have setters which they need to have in order work with Inputs.bind. You can apply a set of helpers from this notebook:

1 Like