Tesserae

Slider

Description

The Slider component represents a range input control that allows users to select a numeric value within a specific range. It is ideal for cases where a user needs to adjust a value by moving a handle along a track. This component is part of the Tesserae UI component library and falls under the Components group.

Usage

To instantiate a Slider, use the static helper method from the Tesserae.UI class. You can configure its initial value, minimum value, maximum value, and step interval. The component supports both horizontal and vertical orientations and provides methods to enable or disable the slider.

Below is a simple code example that demonstrates how to create and use a Slider instance:

slider-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
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 sampleComponent = new SliderExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class SliderExample : IComponent
    {
        public HTMLElement Render()
        {
            // Create a slider with a default value of 50, minimum 0, maximum 100 and step 5
            var slider = Slider(val: 50, min: 0, max: 100, step: 5)
                             .Horizontal();

            // Optionally, attach an input event to handle value changes
            slider.OnInput((s, e) =>
            {
                console.log($"Slider Value: {s.Value}");
            });

            return slider.Render();
        }
    }
}

Methods

SetValue(int val) → Slider
Sets the slider's current value.
SetMin(int min) → Slider
Sets the minimum value for the slider.
SetMax(int max) → Slider
Sets the maximum value for the slider.
SetStep(int step) → Slider
Defines the step interval for the slider's value change.
Disabled(bool value = true) → Slider
Enables or disables the slider. Passing true disables the slider.
Horizontal() → Slider
Sets the slider orientation to horizontal.
Vertical() → Slider
Sets the slider orientation to vertical.

Properties

Orientation (SliderOrientation)
Gets or sets the orientation of the slider. Acceptable values are:
- SliderOrientation.Horizontal
- SliderOrientation.Vertical
Value (int)
Gets or sets the current numeric value of the slider.
Min (int)
Gets or sets the minimum allowed value for the slider.
Max (int)
Gets or sets the maximum allowed value for the slider.
Step (int)
Gets or sets the incremental step value for the slider.
IsEnabled (bool)
Indicates whether the slider is enabled. Setting this property will add or remove the disabled styling accordingly.

Samples

Basic Slider Usage

This sample demonstrates how to create a basic horizontal slider configured with a minimum value of 0, a maximum value of 100, a default value of 0, and a step value of 1. The sample also shows how to attach an input event to handle user interactions.

slider-2-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
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 sampleComponent = new BasicSliderSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class BasicSliderSample : IComponent
    {
        public HTMLElement Render()
        {
            // Create a basic slider instance
            var slider = Slider(val: 0, min: 0, max: 100, step: 1)
                             .Horizontal()
                             .OnInput((s, e) =>
                             {
                                 console.log($"Slider updated to: {s.Value}");
                             });

            return slider.Render();
        }
    }
}

Vertical Slider with Custom Range

This sample demonstrates setting up a vertical slider along with custom minimum, maximum, and step values. The slider orientation is changed to vertical using the Vertical() method.

slider-3-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
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 sampleComponent = new VerticalSliderSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class VerticalSliderSample : IComponent
    {
        public HTMLElement Render()
        {
            // Create a vertical slider with a custom range and step
            var slider = Slider(val: 25, min: 0, max: 50, step: 5)
                             .Vertical()
                             .OnInput((s, e) =>
                             {
                                 console.log($"Vertical Slider Value: {s.Value}");
                             });

            return slider.Render();
        }
    }
}

Referenced by

number-picker