Component field guide

Explore live variants, compare states, and learn every prop. Pick a component to start.

LIVE COMPONENT

WelkRangeSlider

A labeled native range input with a slightly distorted straight track. Values and onValueChange use numbers. It preserves native keyboard stepping, form submission, reset, and disabled behavior.

Hero power

Usage

React / TSX

import { WelkRangeSlider } from "@welkui/react";

<WelkRangeSlider label="Hero power" min={0} max={100}
  defaultValue={60} onValueChange={(value) => console.log(value)} />

Import @welkui/react/styles.css once in your app. Stateful snippets belong inside a React component.

Variants and behavior

One range presentation; customize numeric bounds and step.

Visual variant gallery

These are real components, not screenshots. Compare their appearance and try the controls. Key props below each preview show what changes; use the usage example above for imports and component setup.

Live numeric value

Drag the thumb or use arrow keys; onValueChange delivers a number.

Live power

Current value: 50

Key propsvalue={power} onValueChange={setPower}

Custom bounds and steps

Move between 10 and 50 in increments of 10.

Power level

Key propsmin={10} max={50} step={10}

Disabled

The thumb remains at its value but cannot move.

Locked power

Key propsdisabled defaultValue={60}

Usage notes and accessibility

Use for a numeric range where approximate adjustment is natural. Choose min, max and step to match the domain and keep the current value visible when precision matters.
onValueChange returns a number; native onChange is available too. Controlled value/defaultValue use numbers, unlike the string-based date and time fields.
Users can drag, focus the input and use arrow keys, or use native range keyboard shortcuts. Do not communicate the value through track color alone.

Props

Required props are marked in the default column. Other props are optional. ReactNode accepts text or JSX.

WelkRangeSlider prop reference
Prop	Type	Default	Description
`label`	`ReactNode`	Required	Visible, accessible control label.
`value`	`number`	Uncontrolled	Controlled numeric value.
`defaultValue`	`number`	Native midpoint	Initial uncontrolled value.
`onValueChange`	`(value: number) => void`	Unset	Receives the numeric value after a change.
`min`	`Native input min`	0	Lower range bound.
`max`	`Native input max`	100	Upper range bound.
`step`	`Native input step`	1	Allowed increments, or any for continuous values.
`onChange`	`ChangeEventHandler<HTMLInputElement>`	Unset	Optional native change event in addition to onValueChange.

Native props and refs

Inherits native input props except the fields replaced by this component's API: name, id, disabled, required, form, onBlur, onFocus, className, style, aria-* and data-* are supported. Forwards an input ref. type is fixed to range and children is omitted; value/defaultValue must be numeric.

Project setup, styling and Next.js

Import @welkui/react/styles.css once in your app entry or Next.js root layout. The previews use the default theme; override --welk-* CSS tokens in your app to customize it.

For Next.js, put hooks and event handlers in a component beginning with "use client". Keep state local to the component using the control. The library preserves its client boundaries and uses your installed React version.

Use defaultValue or defaultChecked for uncontrolled fields, or a state value and its change callback for controlled fields. Do not switch between these modes during the lifetime of a field.

Modal and notification examples start closed: use their Try buttons to see them. Disabled examples are deliberately non-interactive. Validate forms, uploads, authentication, and server responses in your application; these components only provide UI.