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();
}
}
}
API reference
class
Slider
public sealed class Slider : ComponentBase<Slider, HTMLInputElement>
A slider component.
Constructors
Constructor
Slider
public Slider(int val = 0, int min = 0, int max = 100, int step = 10)
Initializes a new instance of the class.
Parameters
val
The initial value.
min
The minimum value.
max
The maximum value.
step
The step size.
Properties
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
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.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();
}
}
}
