Tesserae - Steps Slider

StepsSlider

Description

A slider that snaps to discrete named steps

StepsSlider is a generic slider component that constrains movement to a fixed set of named values. Unlike a continuous slider, it only ever lands on one of the provided steps, making it suitable for cases where only a handful of distinct choices are valid.

Common uses include selecting T-shirt sizes, quality levels, priority tiers, or any domain-specific ordered category where a free numeric value would be meaningless.

API reference

class

StepsSlider<T>

public sealed class StepsSlider<T> : IComponent where T : IEquatable<T>

A slider component that snaps to discrete steps.

Type Parameters

T: The type of the steps.

Constructors

Constructor

StepsSlider

public StepsSlider(params T[] steps)

Initializes a new instance of the class.

Parameters

steps: The discrete steps.

Properties

Property

StepsSlider.Value

public T Value { get ; set ; }

Gets or sets the current value.

Property

StepsSlider.IsEnabled

public bool IsEnabled { get ; set ; }

Gets or sets whether the slider is enabled.

Property

StepsSlider.Orientation

public Slider.SliderOrientation Orientation { get ; set ; }

Gets or sets the orientation of the slider.

Methods

Method

StepsSlider.Comparer

public StepsSlider<T> Comparer(IEqualityComparer<T> equalityComparer)

Sets the equality comparer for the steps.

Parameters

equalityComparer: The equality comparer.

Returns

The current instance.

Method

StepsSlider.SetValue

public StepsSlider<T> SetValue(T val)

Sets the value of the slider.

Parameters

val: The value.

Returns

The current instance.

Method

StepsSlider.OnChange

public StepsSlider<T> OnChange(Action<T> onChange)

Attaches a handler to the change event.

Parameters

onChange: The handler.

Returns

The current instance.

Method

StepsSlider.Disabled

public StepsSlider<T> Disabled(bool value = true)

Sets whether the slider is disabled.

Parameters

value: Whether it's disabled.

Returns

The current instance.

Method

StepsSlider.Horizontal

public StepsSlider<T> Horizontal()

Sets the orientation to horizontal.

Method

StepsSlider.Vertical

public StepsSlider<T> Vertical()

Sets the orientation to vertical.

Method

StepsSlider.Render

public HTMLElement Render()

Renders the component.

Returns

The rendered HTML element.

Samples

String Steps (T-shirt Sizes)

steps-slider-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sizeValue = new SettableObservable<string>("M");

            var sizeSlider = new StepsSlider<string>("XS", "S", "M", "L", "XL")
               .OnChange(v =>
                {
                    sizeValue.Value = v;
                    Toast().Information($"Size changed to: {v}");
                });

            var component = VStack().Children(
                Label("Size").SetContent(sizeSlider),
                HStack().Children(TextBlock("Selected: "), DeferSync(sizeValue, v => TextBlock(v).SemiBold()))
            );

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

Integer Steps (Percentage)

steps-slider-2-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var percentValue = new SettableObservable<int>(50);

            var percentSlider = new StepsSlider<int>(0, 25, 50, 75, 100)
               .OnChange(v => percentValue.Value = v);

            var component = VStack().Children(
                Label("Progress").SetContent(percentSlider),
                HStack().Children(TextBlock("Selected: "), DeferSync(percentValue, v => TextBlock($"{v}%").SemiBold()))
            );

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

Disabled

steps-slider-3-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = Label("Disabled Slider").Disabled().SetContent(new StepsSlider<string>("Low", "Medium", "High").Disabled());

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

StepsSlider

Description

API reference

Constructors

StepsSlider

Parameters

Properties

StepsSlider.Value

StepsSlider.IsEnabled

StepsSlider.Orientation

Methods

StepsSlider.Comparer

Parameters

Returns

StepsSlider.SetValue

Parameters

Returns

StepsSlider.OnChange

Parameters

Returns

StepsSlider.Disabled

Parameters

Returns

StepsSlider.Horizontal

StepsSlider.Vertical

StepsSlider.Render

Returns

Samples

String Steps (T-shirt Sizes)

Integer Steps (Percentage)

Disabled

See also