Components

Slider

Select a numeric value with a native range input.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { useState } from 'react';
import { Slider } from '@swiftuijs/ui';
import { VStack } from '@swiftuijs/ui';
import { Text } from '@swiftuijs/ui';
const ControlledSliderDemo = () => {
    const [value, setValue] = useState(50);
    return (<VStack spacing={16}>
      <Text>Controlled value: {value}</Text>
      <Slider aria-label="Controlled slider" value={value} onValueChange={setValue} min={0} max={100}/>
    </VStack>);
};
export default function Example() {
    return (<ControlledSliderDemo />);
}

Uncontrolled Usage

Use defaultValue when the browser should own the current value after mount.

Usage and limitations

  • Controlled: value/onValueChange; uncontrolled: defaultValue. onChange also receives the native event.
  • Set min, max, and step for the required range/granularity; supports disabled and native form submission.
  • Provide aria-label, aria-labelledby, or an associated label, and display the current value when it matters. Check keyboard and touch interaction.

More examples

Uncontrolled Usage
Disabled State

API reference

PropTypeRequiredDescription
valuenumberNoThe current value of the slider.
defaultValuenumberNoThe initial value of the slider when uncontrolled.
onValueChange(value: number) => voidNoCallback fired when the value changes.
onChange(event: ChangeEvent<HTMLInputElement>) => voidNoNative change event handler forwarded to the underlying input.
minnumberNoThe minimum value of the slider. Default: 0
maxnumberNoThe maximum value of the slider. Default: 100
stepnumberNoThe step increment for the slider. Default: 1
disabledbooleanNoWhether the slider is disabled. Default: false

Inherits additional props from Omit< IBaseElementComponent<'input'>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'children' >.

Edit this page on GitHubReport an issue

Sheet

A modal presentation with a focus trap, background isolation and scroll lock. Set `isPresented` and close it from `onDismiss`.

Spacer

Distribute unused space along a stack’s main axis.