Slider

Range input with tooltips, custom ranges, and model binding.

<rhx-slider>

Examples

Basic

Volume

<rhx-slider name="volume" rhx-label="Volume" value="50" />

Custom Range

<rhx-slider name="custom" rhx-label="Custom Range"
           rhx-min="10" rhx-max="200" rhx-step="10"
           value="80" />

With Tooltip

<rhx-slider name="brightness" rhx-label="Brightness"
           value="75" rhx-tooltip="top" />
<rhx-slider name="contrast" rhx-label="Contrast"
           value="60" rhx-tooltip="bottom" />

With Hint

Opacity

0 = fully transparent, 100 = fully opaque

<rhx-slider name="opacity" rhx-label="Opacity"
           value="100"
           rhx-hint="0 = fully transparent, 100 = fully opaque" />

Sizes

Small slider

Medium slider (default)

Large slider

<rhx-slider name="sl-sm" rhx-label="Small slider" rhx-size="small" value="30" />
<rhx-slider name="sl-md" rhx-label="Medium slider (default)" value="50" />
<rhx-slider name="sl-lg" rhx-label="Large slider" rhx-size="large" value="70" />

States

Disabled slider

<rhx-slider name="sl-dis" rhx-label="Disabled slider"
           rhx-disabled="true" value="40" />

Model Binding

Volume

<rhx-slider rhx-for="Volume" rhx-label="Volume" />

htmx Integration

Font Size

The quick brown fox jumps over the lazy dog.

<rhx-slider name="fontSize" rhx-label="Font Size"
           value="16" rhx-min="8" rhx-max="48" rhx-step="1"
           rhx-tooltip="top"
           hx-get="/Docs/Components/Slider?handler=FontPreview"
           hx-trigger="input changed delay:200ms"
           hx-target="#slider-preview"
           hx-include="this" />
<div id="slider-preview">
    <span style="font-size: 16px;">The quick brown fox...</span>
</div>

Properties

Property	Type	Default	Description
`rhx-for`	`ModelExpression`	`-`	ASP.NET Core model expression for two-way binding
`name`	`string`	`-`	The form field name
`value`	`string`	`-`	The current value
`rhx-label`	`string`	`-`	Label text displayed above the slider
`rhx-hint`	`string`	`-`	Hint text displayed below the slider
`rhx-min`	`string`	`0`	Minimum value
`rhx-max`	`string`	`100`	Maximum value
`rhx-step`	`string`	`1`	Step increment
`rhx-tooltip`	`string`	`-`	Tooltip position: top, bottom
`rhx-size`	`string`	`medium`	Slider size: small, medium, large
`rhx-disabled`	`bool`	`false`	Whether the slider is disabled