Range

Slider input for selecting a value in a range.

Usage

<w-range value="50" min="0" max="100" label="Volume">
  <w-slot rail>
    <div>
      <w-slot fill><div></div></w-slot>
      <w-slot knob><div></div></w-slot>
    </div>
  </w-slot>
</w-range>

Props

Prop	Type	Default	Description
value	number	0	Current value
min	number	0	Minimum value
max	number	100	Maximum value
step	number	1	Step increment
label	string	""	Accessible label
disabled	boolean	false	Disable slider
orientation	"horizontal" | "vertical"	"horizontal"	Slider orientation

Slots

Slot	Element	Description
track	Container	Slider track container
fill	Element	Filled portion of track
thumb	Element	Draggable thumb

Events

Event	Detail	Description
change	{ value }	Value changed (on release)
input	{ value }	Value changing (while dragging)

Keyboard

Key	Action
ArrowRight / ArrowUp	Increment
ArrowLeft / ArrowDown	Decrement
Home	Set to minimum
End	Set to maximum
PageUp	Increment by 10%
PageDown	Decrement by 10%

Accessibility

• role="slider" with full ARIA value attributes
• Keyboard accessible
• Works with screen readers