RangeSlider

A two-thumb range slider that selects a lower/upper value pair. It reuses the visual language of the single-value Slider — the cold-to-hot gradient, blended thumb borders, and floating value tooltip — showing the gradient across the active segment between the two thumbs over a neutral track, drawing a tooltip per thumb, and adding two distance constraints between the thumbs.

• 
• 

Frameworks

.NET MAUI

Blazor

MAUI

Blazor

Features

• Two Thumbs – Selects a LowerValue / UpperValue pair; both are two-way bindable.
• Gradient Active Segment – The segment between the thumbs renders a gradient blended from ColdColor to HotColor at the thumb positions; the rest of the track is a neutral surface color.
• Blended Thumb Borders – Each thumb’s border color samples the gradient at its own position.
• Per-Thumb Tooltips – A tooltip badge floats above each thumb; replace both with a custom template.
• Minimum Gap (hard stop) – MinimumRange prevents the thumbs from getting closer than a set distance; the dragged thumb stops rather than crossing it.
• Maximum Gap (push) – MaximumRange caps how far apart the thumbs may be; dragging one thumb past it pushes the other along.
• Step Snapping – Values snap to the configured Step.
• Drag & Tap – Drag either thumb, or tap the track to move whichever thumb is nearer.

AI Skill

Claude CodeGitHub Copilot

Step 1 — Add the marketplace:

claude plugin marketplace add shinyorg/skills

Step 2 — Install the plugin:

claude plugin install shiny@shiny

One plugin installs all 35 Shiny skills. Your agent loads only the skill relevant to what you're building, so there's no cost to having them all available.

Step 1 — Add the marketplace:

copilot plugin marketplace add https://github.com/shinyorg/skills

Step 2 — Install the plugin:

copilot plugin install shiny@shiny

One plugin installs all 35 Shiny skills. Your agent loads only the skill relevant to what you're building, so there's no cost to having them all available.

View Skills Repository

Quick Start

.NET MAUI

<shiny:RangeSlider LowerValue="{Binding PriceLow}"
                   UpperValue="{Binding PriceHigh}"
                   Minimum="0"
                   Maximum="1000"
                   Step="10"
                   MinimumRange="50"
                   MaximumRange="500"
                   ValueFormat="C0" />

Blazor

<RangeSlider @bind-LowerValue="priceLow"
             @bind-UpperValue="priceHigh"
             Minimum="0"
             Maximum="1000"
             Step="10"
             MinimumRange="50"
             MaximumRange="500"
             ValueFormat="C0" />

@code {
    double priceLow = 250;
    double priceHigh = 750;
}

Properties

Property	MAUI Type	Blazor Type	Default	Description
LowerValue	double	double	0	Lower thumb value (TwoWay)
UpperValue	double	double	100	Upper thumb value (TwoWay)
Minimum	double	double	0	Minimum value
Maximum	double	double	100	Maximum value
Step	double	double	1	Snap increment
MinimumRange	double	double	0	Minimum gap between thumbs (hard stop); 0 = off
MaximumRange	double	double	0	Maximum gap between thumbs (pushes the other thumb); 0 = off
ColdColor	Color	string	#3B82F6	Left (cold) gradient color
HotColor	Color	string	#EF4444	Right (hot) gradient color
TrackHeight	double	double	8	Track height in px
ThumbSize	double	double	24	Thumb diameter in px
ThumbColor	Color	string	White	Thumb fill color
ThumbBorderWidth	double	double	2	Thumb border width
ShowTooltip	bool	bool	true	Show a value tooltip per thumb
TooltipBackgroundColor	Color	string	#1F2937	Tooltip badge background
TooltipTextColor	Color	string	White	Tooltip text color
TooltipFontSize	double	double	12	Tooltip font size
ValueFormat	string?	string?	null	.NET format string for display
TooltipTemplate	DataTemplate?	RenderFragment<double>?	null	Custom tooltip content (applied to both thumbs)
IsEnabled	–	bool	true	Enable/disable (Blazor only; MAUI uses IsEnabled from VisualElement)

Events & Commands

MAUI:

• RangeChanged (EventHandler<SliderRange>) – Fired when either value changes; SliderRange is a record struct with Lower/Upper
• RangeChangedCommand (ICommand) – Command fired with the SliderRange on change

Blazor:

• LowerValueChanged (EventCallback<double>) – Two-way binding callback for the lower thumb
• UpperValueChanged (EventCallback<double>) – Two-way binding callback for the upper thumb
• RangeChanged (EventCallback<(double Lower, double Upper)>) – Fired with both values on change

Behavior

• The active segment between the thumbs shows the gradient blended at each thumb’s position; the base track is the theme SurfaceVariant color
• Each thumb’s border takes the blended color at its position
• Values are clamped to Minimum/Maximum and snapped to Step
• MinimumRange is a hard stop — the dragged thumb will not come closer than this gap to the other thumb
• MaximumRange pushes the opposite thumb — dragging one thumb far enough drags the other so the gap never exceeds it
• Constraints apply to interaction (drag/tap); programmatically-set or data-bound values render as provided
• Setting ShowTooltip="False" hides both tooltips