# Slider

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.

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:

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

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.WriteLine($"Slider Value: {s.Value}");
        });

        return slider.Render();
    }
}

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

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

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.

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

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.WriteLine($"Slider updated to: {s.Value}");
                         });

        return slider.Render();
    }
}

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.

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

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.WriteLine($"Vertical Slider Value: {s.Value}");
                         });

        return slider.Render();
    }
}

• Button
• TextBox