Forms

TwSlider

TwSlider is a Blazor slider component for choosing a number in a range. Bind Value and set Min, Max, Step and Color.

Last updated 24 September 2026

Basic Usage

A drop-in replacement for <input type="range"> with a fully custom, themeable track and thumb.

Volume

Current Volume: 50%

Razor

<TwSlider T="int" Id="volume-slider" Min="0" Max="100" Step="1" Label="Volume" @bind-Value="volumeValue" AriaLabel="Volume slider" />
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Current Volume: <strong>@volumeValue%</strong></p>

CSHARP

@code {
    private int volumeValue = 50;
}

Colors

Use Color to give a slider meaning at a glance - here it signals status rather than just decoration.

Battery

82% remaining

CPU Usage

34% load

Signal Strength

4 / 5 bars

Razor

<div class="space-y-6">
    <div>
        <TwSlider T="int" Id="battery-slider" Min="0" Max="100" Step="1" Label="Battery" Color="Color.Success" @bind-Value="batteryValue" AriaLabel="Battery level slider" />
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">@batteryValue% remaining</p>
    </div>

    <div>
        <TwSlider T="int" Id="cpu-slider" Min="0" Max="100" Step="1" Label="CPU Usage" Color="Color.Danger" @bind-Value="cpuValue" AriaLabel="CPU usage slider" />
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">@cpuValue% load</p>
    </div>

    <div>
        <TwSlider T="int" Id="signal-slider" Min="0" Max="5" Step="1" Label="Signal Strength" Color="Color.Accent" @bind-Value="signalValue" AriaLabel="Signal strength slider" />
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">@signalValue / 5 bars</p>
    </div>
</div>

CSHARP

@code {
    private int batteryValue = 82;
    private int cpuValue = 34;
    private int signalValue = 4;
}

Precision & Range

Any comparable numeric type works via T - use decimals with a fractional Step for fine control, or negative Min values for ranges that cross zero.

Price

Selected Price: $25.50

Temperature

Set to: 20°C

Razor

<div class="space-y-6">
    <div>
        <TwSlider T="decimal" Id="price-slider" Min="0m" Max="100m" Step="0.5m" Label="Price" @bind-Value="priceValue" AriaLabel="Price slider" />
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Selected Price: <strong>@($"${priceValue:F2}")</strong></p>
    </div>

    <div>
        <TwSlider T="int" Id="temperature-slider" Min="-20" Max="40" Step="1" Label="Temperature" Color="Color.Accent" @bind-Value="temperatureValue" AriaLabel="Temperature slider" />
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Set to: <strong>@temperatureValue&deg;C</strong></p>
    </div>
</div>

CSHARP

@code {
    private decimal priceValue = 25.50m;
    private int temperatureValue = 20;
}

Disabled & Readonly

Disabled dims and locks the slider; ReadOnly keeps its color but blocks changes.

Disabled

Readonly

Razor

<div class="space-y-6">
    <TwSlider T="int" Id="disabled-slider" Min="0" Max="100" Step="1" Label="Disabled" @bind-Value="disabledValue" Disabled AriaLabel="Disabled slider" />
    <TwSlider T="int" Id="readonly-slider" Min="0" Max="100" Step="1" Label="Readonly" Color="Color.Danger" @bind-Value="readonlyValue" ReadOnly AriaLabel="Readonly slider" />
</div>

CSHARP

@code {
    private int disabledValue = 40;
    private int readonlyValue = 70;
}

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwSliderTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`Wrapper`	string
`Base`	string
`Fill`	string
`Track`	string
`Thumb`	string
`Bubble`	string

Global Theme Configuration

These reuse shared design tokens configured once on TwBlazorTheme, rather than being unique to this component.

Property	Type	Controls
`Colors`	TwBlazorPalette

Full reference: TwSliderTheme on the API docs.