Overview

EO.Web Slider/RangeSlider can display labels for any value. The following image demonstrates this feature:

Note a label does not have to correspond to a tick mark. In the above example, both label "Poor" and "Good" are between two tick marks.

Adding Labels Declaratively

You can easily declare one or more labels in .aspx. For example, the following code declares five labels:

<eo:Slider ....>
    <Labels>
        <eo:SliderLabel Value="0" Text="Terrible" />
        <eo:SliderLabel Value="2.5" Text="Poor" />
        <eo:SliderLabel Value="5" Text="Average" />
        <eo:SliderLabel Value="7.5" Text="Good" />
        <eo:SliderLabel Value="10" Text="Pefect" />
    </Labels>
</eo:Slide>

Once declared, you can use LabelPosition property to specify whether labels should be displayed on the top/left, the bottom/right, or both sides of the slider.

Adding Labels Programmatically

The following code demonstrates how to add labels programmatically:

//Create the label
EO.SliderLabel label = new EO.SliderLabel();
label.Value = 5;
label.Text = "Average";

//Add the label to the slider's Labels collection
slider1.Labels.Add(label);

'Create the label
Dim label As New EO.SliderLabel()
label.Value = 5
label.Text = "Average"

'Add the label to the slider's Labels collection
slider1.Labels.Add(label)

Customize Label Styles

Set LabelCssClass to customize label style. For example, the following class set the label's font and also reserves some gap space between the label text and the track bar:

.slider_label
{
    font-family: Verdana;
    font-size: 10px;
    padding-bottom: 5px;
}

<eo:Slider LabelCssClass="slider_label" ....>
    ....
</eo:Slider>