Slider

A slider component for selecting a value from a range.

Installation

$npx maddex add Slider

Default

Start with the standard shadcn single-thumb pattern: seed a value with default-value and let the slider manage itself.

Preview

        
            
        
    

Controlled

Pair value, on-value-change, and on-value-commit when the rest of the interface needs to stay in sync with the active value.

Preview

        
            
        
    

Range

Pass two values to render a dual-thumb slider for bounded windows such as quiet hours, budgets, or thresholds.

Preview