Slider

Range slider input for selecting numeric values.

Import

import '@kittl/ui';

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

Usage

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

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

/** Basic Slider usage, rendered live on the docs site. */
export const SliderUsage = () => (
  <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	Attribute	Type	Default	Description
min	min	number	0	Minimum slider value
max	max	number	100	Maximum slider value
step	step	number	1	Slider step interval
value	value	number	50	Current value
label	label	string	—	Label displayed above the slider
name	name	string	—	Form field name
disabled	disabled	boolean	—	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)