Numerical TextInput

What is the simplest way of binding a TextInput to an observer that can only accept numerical values?

I have some numerical values that can be adjusted via Sliders with Text labels next to them.

If you tap on the label, you can edit the value directly via a TextInput.

TextInput.InputHint is set to "Integer".

However, if while editing the TextInput you delete all digits the app dies with ERROR: Input string was not in a correct format because, rightly so, the observable can no longer be parsed as a number for the Slider.Value.

Is there a simple way of only writing back to the observable if the TextInput is in a valid numerical format? Ideally also with the ability to clamp within a min/max range.

You can use a little bit of javascript to validate that the input is a number before passing it on.
This seems to be a workable option in that case, so you could try this:

		var Observable = require("FuseJS/Observable");
		tout = Observable(0);
		function isNumber(n) {
		  return !isNaN(parseFloat(n)) && isFinite(n);
		function handleinput(arg){
			if(isNumber(arg.value)) tout.value = arg.value;
		module.exports = {tout,handleinput}
		<Slider Value="{tout}" Dock="Top"/>
		<TextBox ValueChanged="{handleinput}"/>

Okay, this seems really obvious to me now xD Thanks!

( For anyone reading this and wondering about using this with a custom class and properties, you can access the properties locally in the Javascript block via this. So to update the input property via js you’d do this.input.value = bar )

Thanks again!