Tesserae

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.

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);
        }
    }
}