How to access values from bound Inputs?

[aaronkyle]

I'd appreciate any help to learn how to access a value from bound, synchronized inputs. The following code is a minimal example of an app that conditionally displays views of further inputs if a file attachment is loaded. In it, I bind a range slider to a date selection input to allow users to select a specific date, or to scroll between dates. However, I cannot figure out how to access this dynamic value. If I do this:

display(commitmentDateRange_SOC.value)

... Then I only get a static date. If I don't use .value, then I just end up dragging the view across the DOM.

I expect that I might need to use a mutable variable that is accessed by both the inputs, but I haven't found a working solution. Any tips welcome! :)

---

Here's my code:

const local_file = view(Inputs.file({accept: ".csv"}))

const check_file_status = display(local_file !== null)

// this is just markdown.... the intention is to only expose the rest of the fields if a file is attached
${display([
    check_file_status ? select_date : "",
    check_file_status ? commitmentDateRange_SOC : "",
])}

const report = local_file.csv()

let commitmentDateRange_SOC = 
  Inputs.range(
    [commitment_range_start, commitment_range_end],
    {
      label: "Adjust Date",
      value: new Date(),
      step: 24 * 60 * 60 * 1000  // Set step to 1 day in milliseconds
    }
  )

let select_date = Inputs.bind(Inputs.date({
  label: "Select Date",
  value: commitmentDateRange_SOC,
  min: commitment_range_start,
  max: commitment_range_end
}),commitmentDateRange_SOC)

const commitment_range_start = (function() {
  return report.reduce((earliest, entry) => {
    let date = new Date(entry["Expected Commitment Date"]);
    return !earliest || date < earliest ? date : earliest;
  }, null);
})();

const commitment_range_end = (function() {
  return report.reduce((latest, entry) => {
    let date = new Date(entry["Expected Commitment Date"]);
    return !latest || date > latest ? date : latest;
  }, null);
})();

[Fil]

You probably have to use a view or Generators.input on commitmentDateRange_SOC to define your reactive value.

Something like:

${commitmentDateRange_SOC}

${select_date}

${date}


```js echo
const commitmentDateRange_SOC = Inputs.range([commitment_range_start, commitment_range_end],
{
  label: "Adjust Date",
  value: new Date(),
  step: 24 * 60 * 60 * 1000 // Set step to 1 day in milliseconds
});

const select_date = Inputs.bind(Inputs.date({
  label: "Select Date",
  min: commitment_range_start,
  max: commitment_range_end
}), commitmentDateRange_SOC);

const date = Generators.input(commitmentDateRange_SOC);
```

[aaronkyle]

Thanks, @Fil !