SliderExtender Component

The SliderExtender converts a target textbox into a graphical slider control. Users drag a handle along a track to select a value. This emulates the Ajax Control Toolkit SliderExtender.

Note: Extender components render no HTML themselves — they attach JavaScript behavior to an existing target element identified by TargetControlID. This page requires InteractiveServer render mode for JS interop.

1. Basic Slider

A horizontal slider with default range 0-100.

<input type="text" id="txtSliderBasic" value="50" />
<SliderExtender TargetControlID="txtSliderBasic"
                Minimum="0" Maximum="100" Value="50"
                Length="300" TooltipText="{0}%" />

2. Vertical Orientation

Set Orientation="SliderOrientation.Vertical" for a vertical slider.

<SliderExtender TargetControlID="txtSliderVertical"
                Minimum="0" Maximum="100"
                Orientation="SliderOrientation.Vertical"
                Length="180" />

3. Bound Control

Use BoundControlID to synchronize the slider value with another element (e.g., a label or textbox that displays the current value).

75
<input type="text" id="txtSliderBound" value="75" />
<SliderExtender TargetControlID="txtSliderBound"
                Minimum="0" Maximum="100"
                BoundControlID="lblBrightness" />
<span id="lblBrightness">75</span>

4. Custom Styling and Steps

Apply RailCssClass and HandleCssClass for custom appearance. Use Steps for discrete snap points.

0=None, 1=Low, 2=Medium, 3=High, 4=Critical
<SliderExtender TargetControlID="txtSliderStyled"
                Minimum="0" Maximum="4" Steps="5"
                RailCssClass="slider-rail-custom"
                HandleCssClass="slider-handle-custom"
                TooltipText="Priority: {0}" />

Migration Guide: Ajax Control Toolkit to Blazor

Ajax Control Toolkit (Before)

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:TextBox ID="txtSlider" runat="server" />
<ajaxToolkit:SliderExtender ID="Slider1" runat="server"
    TargetControlID="txtSlider"
    Minimum="0" Maximum="100" Steps="0"
    BoundControlID="lblValue"
    Orientation="Horizontal" />
<asp:Label ID="lblValue" runat="server" />

Blazor with BWFC (After)

<input type="text" id="txtSlider" />
<SliderExtender TargetControlID="txtSlider"
                Minimum="0" Maximum="100"
                BoundControlID="lblValue"
                Orientation="SliderOrientation.Horizontal" />
<span id="lblValue"></span>

Migration Steps

  1. Remove asp:ScriptManager
  2. Replace <asp:TextBox> with <input type="text">
  3. Replace <ajaxToolkit:SliderExtender> with <SliderExtender>
  4. Keep property names: Minimum, Maximum, Steps, BoundControlID
  5. Prefix enum values: Orientation="SliderOrientation.Horizontal"
  6. Ensure the page uses @rendermode InteractiveServer