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

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 Code GitHub Copilot

Step 1 — Add the marketplace:

claude plugin marketplace add shinyorg/skills

Step 2 — Install plugins:

claude plugin install shiny-client@shiny

BLE, GPS, Jobs, Notifications, Push, HTTP Transfers, OBD, Music, Health, DataSync — iOS, Android, Windows, MacOS, Linux, Web

claude plugin install shiny-maui@shiny

Shell, Contact Store

claude plugin install controls@shiny

TableView, BottomSheet, PillView, ImageViewer, Scheduler, Markdown, Mermaid Diagrams — MAUI and Blazor

claude plugin install shiny-mediator@shiny

Mediator/CQRS with middleware and source generators

claude plugin install shiny-data@shiny

DocumentDB and Spatial data libraries

claude plugin install shiny-aspire@shiny

Orleans and Gluetun Aspire integrations

claude plugin install shiny-extensions@shiny

DI, Stores, Reflector, Localization, Hosting modules

Step 1 — Add the marketplace:

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

Step 2 — Install plugins:

copilot plugin install shiny-client@shiny

BLE, GPS, Jobs, Notifications, Push, HTTP Transfers, OBD, Music, Health, DataSync — iOS, Android, Windows, MacOS, Linux, Web

copilot plugin install shiny-maui@shiny

Shell, Contact Store

copilot plugin install controls@shiny

TableView, BottomSheet, PillView, ImageViewer, Scheduler, Markdown, Mermaid Diagrams — MAUI and Blazor

copilot plugin install shiny-mediator@shiny

Mediator/CQRS with middleware and source generators

copilot plugin install shiny-data@shiny

DocumentDB and Spatial data libraries

copilot plugin install shiny-aspire@shiny

Orleans and Gluetun Aspire integrations

copilot plugin install shiny-extensions@shiny

DI, Stores, Reflector, Localization, Hosting modules

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