Svelte 5 Slider – Range Input

Range slider with custom track and thumb styling.

forminputrange

Preview

Use Case

Selecting numeric values within a range (e.g., volume, brightness).

Props API

Slider component props
PropTypeDefaultDescription
value number—Bindable value
min number0Minimum value
max number100Maximum value

Related Components

Input

See it in Action

Explore the Slider in an interactive dashboard environment.

Customize in Showroom

More Inputs Components

Toggle

Designed for high-contrast visibility in Logistics control panels, this Svelte 5 switch uses strict ARIA roles for accessibility.

Button

Inspired by the Braun ET66 calculator, this button features a satisfying press animation and gradient shading that creates depth.

Input

Designed to feel carved into the interface rather than sitting on top, this input uses inner shadows to create depth.