Tesserae - Number Picker

NumberPicker

Description

The NumberPicker component is a numeric input control that leverages the native HTML number input field. It provides a fluent API to configure properties such as minimum, maximum, and step values. As part of the Tesserae Components group, it is ideal for scenarios where users need to select or input a numerical value. In addition, it supports text formatting features and style customizations like background and foreground colors.

Usage

Instantiate a NumberPicker using the Tesserae.UI helper method. You can create a default NumberPicker or initialize it with a starting value, and then chain configuration methods to set properties like minimum, maximum, or step values.

number-picker-sample.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var numberPicker = NumberPicker()           // Creates a NumberPicker with default initial value of 0
                .SetMin(5)                             // Sets the minimum allowed value
                .SetMax(20)                            // Sets the maximum allowed value
                .SetStep(5);                           // Sets the step increment value

            // Render the control on the page (assuming a container exists)
            numberPicker.Render();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(numberPicker);
        }
    }

}

API reference

class

NumberPicker

public class NumberPicker : Input<NumberPicker>, ITextFormating, IHasBackgroundColor, IHasForegroundColor, IBindableComponent<int>

A form input for entering a numeric value, with optional min/max bounds and step.

Namespace: Tesserae
Inheritance: Input<NumberPicker> → NumberPicker
Implements: ITextFormating, IHasBackgroundColor, IHasForegroundColor, IBindableComponent<int>

Constructors

Name	Description
NumberPicker	Initializes a new instance of this class.

Constructor

NumberPicker

public NumberPicker(int defaultValue = 0) : base("number", defaultValue.ToString())

Initializes a new instance of this class.

Properties

Name	Description
Value	Gets or sets the current value of the component.
Max	Gets or sets the maximum value accepted by the component.
Min	Gets or sets the minimum value accepted by the component.
Step	Gets or sets the step increment used by the component.
Size	Gets or sets the size of the component.
Weight	Gets or sets the font weight of the component.
TextAlign	Gets or sets the text alignment of the component.
Background	Gets or sets the CSS background of the component.
Foreground	Gets or sets the CSS color (foreground) of the component.

Property

NumberPicker.Value

public int Value

Gets or sets the current value of the component.

Property

NumberPicker.Max

public int Max { get ; set ; }

Gets or sets the maximum value accepted by the component.

Property

NumberPicker.Min

public int Min { get ; set ; }

Gets or sets the minimum value accepted by the component.

Property

NumberPicker.Step

public int Step { get ; set ; }

Gets or sets the step increment used by the component.

Property

NumberPicker.Size

public TextSize Size { get ; set ; }

Gets or sets the size of the component.

Property

NumberPicker.Weight

public TextWeight Weight { get ; set ; }

Gets or sets the font weight of the component.

Property

NumberPicker.TextAlign

public TextAlign TextAlign { get ; set ; }

Gets or sets the text alignment of the component.

Property

NumberPicker.Background

public string Background { get ; set ; }

Gets or sets the CSS background of the component.

Property

NumberPicker.Foreground

public string Foreground { get ; set ; }

Gets or sets the CSS color (foreground) of the component.

Methods

Name	Description
AsObservable	Returns an observable that tracks the numeric value of the component.
SetBoundValue	Programmatically updates the numeric value as part of a two-way binding.
SetMax	Sets the max of the component.
SetMin	Sets the min of the component.
SetStep	Sets the step of the component.

Method

NumberPicker.AsObservable

IObservable<int> IObservableComponent<int>.AsObservable()

Returns an observable that tracks the numeric value of the component.

Remarks

NumberPicker inherits a string observable from Input{TInput}, accessible via the inherited AsObservable() method. This explicit interface implementation provides an additional IObservable<int> view used when binding to a SettableObservable<int>.

Method

NumberPicker.SetBoundValue

void IBindableComponent<int>.SetBoundValue(int value)

Programmatically updates the numeric value as part of a two-way binding.

Method

NumberPicker.SetMax

public NumberPicker SetMax(int max)

Sets the max of the component.

Method

NumberPicker.SetMin

public NumberPicker SetMin(int min)

Sets the min of the component.

Method

NumberPicker.SetStep

public NumberPicker SetStep(int step)

Sets the step of the component.

Samples

Basic NumberPicker Configurations

The following sample demonstrates different configurations of the NumberPicker, including default initial values, step increments, minimum and maximum constraints, and the disabled/required states.

number-picker-2-sample.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var stack = Stack().Width(40.percent()).Children(
                Label("Standard").SetContent(NumberPicker()),
                Label("With default initial value of 2").SetContent(NumberPicker(2)),
                Label("With step increment of 10").SetContent(NumberPicker().SetStep(10)),
                Label("With max of 10").SetContent(NumberPicker().SetMax(10)),
                Label("With min of 5").SetContent(NumberPicker(8).SetMin(5)),
                Label("Disabled").Disabled().SetContent(NumberPicker().Disabled()),
                Label("Required").Required().SetContent(NumberPicker().Required()),
                Label("With error message").SetContent(NumberPicker().Error("Error message").IsInvalid()),
                Label("With validation")
                    .SetContent(NumberPicker().Validation(numberPicker =>
                        numberPicker.Value % 2 == 0 ? null : "Please choose an even value"))
            );

            stack.Render();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(stack);
        }
    }

}

NumberPicker

Description

Usage

API reference

Constructors

NumberPicker

Properties

NumberPicker.Value

NumberPicker.Max

NumberPicker.Min

NumberPicker.Step

NumberPicker.Size

NumberPicker.Weight

NumberPicker.TextAlign

NumberPicker.Background

NumberPicker.Foreground

Methods

NumberPicker.AsObservable

Remarks

NumberPicker.SetBoundValue

NumberPicker.SetMax

NumberPicker.SetMin

NumberPicker.SetStep

Samples

Basic NumberPicker Configurations

See also