Slider

Range slider input for selecting numeric values.

Preview

Loading preview…

Import

// Web Component
import '@kittl/ui';

// React
import { Slider } from '@kittl/ui-react';

Usage

Web Component

<kittl-slider label="Opacity" min="0" max="100" step="1" value="50"></kittl-slider>

React

<Slider
  label="Opacity"
  min={0}
  max={100}
  step={1}
  value={50}
  onInput={(e) => console.log('live:', e.detail.value)}
  onChange={(e) => console.log(e.detail.value)}
/>

Props

Property	Type	Default	Description
min	number	0	Minimum slider value
max	number	100	Maximum slider value
step	number	1	Slider step interval
value	number	50	Current value
label	string	—	Label displayed above the slider
aria-label	string	'Slider'	Accessible label when no visible label is set
name	string	—	Form field name
disabled	boolean	false	Disable the slider

Events

Event	Detail	Description
input	{ value: number }	Fired continuously while the thumb moves
change	{ value: number }	Fired when the interaction is committed

React props: onInput, onChange

Form Integration

Slider is form-associated and updates ElementInternals.formValue with its numeric value as a string.

Accessibility

• Native range input semantics provide slider behavior for assistive technologies
• aria-valuemin, aria-valuemax, and aria-valuenow reflect the current range state
• Keyboard support is native (Tab focus + arrow keys to adjust)