Tesserae - Slider

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.cs

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

API reference

class

Slider

public sealed class Slider : ComponentBase<Slider, HTMLInputElement>

A slider component.

Namespace: Tesserae
Inheritance: ComponentBase<Slider, HTMLInputElement> → Slider

Constructors

Name	Description
Slider	Initializes a new instance of the `Slider` class.

Constructor

Slider

public Slider(int val = 0, int min = 0, int max = 100, int step = 10)

Initializes a new instance of the Slider class.

Parameters

val: The initial value.
min: The minimum value.
max: The maximum value.
step: The step size.

Properties

Name	Description
Orientation	Gets or sets the orientation of the slider.
Value	Gets or sets the current value.
Min	Gets or sets the minimum value.
Max	Gets or sets the maximum value.
Step	Gets or sets the step size.
IsEnabled	Gets or sets whether the slider is enabled.

Property

Slider.Orientation

public SliderOrientation Orientation { get ; set ; }

Gets or sets the orientation of the slider.

Property

Slider.Value

public int Value { get ; set ; }

Gets or sets the current value.

Property

Slider.Min

public int Min { get ; set ; }

Gets or sets the minimum value.

Property

Slider.Max

public int Max { get ; set ; }

Gets or sets the maximum value.

Property

Slider.Step

public int Step { get ; set ; }

Gets or sets the step size.

Property

Slider.IsEnabled

public bool IsEnabled { get ; set ; }

Gets or sets whether the slider is enabled.

Methods

Name	Description
Render	Renders the component.
SetValue	Sets the value of the slider.
SetMin	Sets the minimum value of the slider.
SetMax	Sets the maximum value of the slider.
SetStep	Sets the step size of the slider.
Disabled	Sets whether the slider is disabled.
Horizontal	Sets the orientation to horizontal.
Vertical	Sets the orientation to vertical.

Method

Slider.Render

public override HTMLElement Render()

Renders the component.

Returns

The rendered HTML element.

Method

Slider.SetValue

public Slider SetValue(int val)

Sets the value of the slider.

Parameters

val: The value.

Returns

The current instance.

Method

Slider.SetMin

public Slider SetMin(int min)

Sets the minimum value of the slider.

Parameters

min: The minimum value.

Returns

The current instance.

Method

Slider.SetMax

public Slider SetMax(int max)

Sets the maximum value of the slider.

Parameters

max: The maximum value.

Returns

The current instance.

Method

Slider.SetStep

public Slider SetStep(int step)

Sets the step size of the slider.

Parameters

step: The step size.

Returns

The current instance.

Method

Slider.Disabled

public Slider Disabled(bool value = true)

Sets whether the slider is disabled.

Parameters

value: Whether it's disabled.

Returns

The current instance.

Method

Slider.Horizontal

public Slider Horizontal()

Sets the orientation to horizontal.

Returns

The current instance.

Method

Slider.Vertical

public Slider Vertical()

Sets the orientation to vertical.

Returns

The current instance.

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.cs

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.cs

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

Slider

Description

Usage

API reference

Constructors

Slider

Parameters

Properties

Slider.Orientation

Slider.Value

Slider.Min

Slider.Max

Slider.Step

Slider.IsEnabled

Methods

Slider.Render

Returns

Slider.SetValue

Parameters

Returns

Slider.SetMin

Parameters

Returns

Slider.SetMax

Parameters

Returns

Slider.SetStep

Parameters

Returns

Slider.Disabled

Parameters

Returns

Slider.Horizontal

Returns

Slider.Vertical

Returns

Samples

Basic Slider Usage

Vertical Slider with Custom Range

See also