Slider

A basic Slider bound to a value with @bind-Value. The slider renders a track with a draggable thumb and displays the current value below. It defaults to a range of 0 to 100 with a step of 1.

Set the Step parameter to control the increment size. In this example, the step is set to 10, so the thumb snaps to values like 0, 10, 20, and so on. This is useful for scenarios where only specific intervals are meaningful.

Use Min and Max to define a custom value range. Combined with Step, this provides precise control over selectable values. Here the range is 0 to 1000 with a step of 50, ideal for scenarios like budget or quantity selection.

Set Disabled to true to prevent all user interaction. Disabled sliders have reduced opacity and a not-allowed cursor. The thumb cannot be dragged and keyboard events are ignored, with aria-disabled set for screen readers.

Set Orientation to SliderOrientation.Vertical for a vertically oriented slider. The parent container must have a defined height for the slider to render correctly. This is useful for volume controls or other vertically oriented inputs.

Use the Class parameter to apply custom Tailwind CSS classes for project-specific styles. You can adjust the track height, thumb size, or add a custom background to match your design system without creating a new component.

A real-world volume control pattern combining a Slider with a label and live value display inside a bordered container. This layout is common for audio settings, brightness controls, and other adjustment interfaces where users need immediate visual feedback.