Skip to Content
UI Components/Cupertino UI/Cupertino Slider

Cupertino Slider

Value selection slider with iOS styling

Framework

View in WebF Go

Download WebF Go to preview this component on devices and desktop.

Installation

Install
1npm install @openwebf/react-cupertino-ui

Usage

Slider.tsx
1import { useState } from 'react';
2import { FlutterCupertinoSlider } from '@openwebf/react-cupertino-ui';
3
4export function SliderExample() {
5  const [value, setValue] = useState(50);
6
7  return (
8    <FlutterCupertinoSlider
9      val={value}
10      min={0}
11      max={100}
12      onChange={(e) => setValue(e.detail)}
13    />
14  );
15}

API Reference

Props (React)

NameTypeDefaultDescription
valnumber0Current slider value.
minnumber0Minimum value.
maxnumber100Maximum value.
stepnumber-Discrete divisions (omit for continuous).
disabledbooleanfalseDisable interactions.

Events (React)

NameTypeDefaultDescription
onChange(event: CustomEvent<number>) => void-Fires on value changes (`event.detail`).
onChangestart(event: CustomEvent<number>) => void-Fires when drag starts.
onChangeend(event: CustomEvent<number>) => void-Fires when drag ends.
Full type definitions: npm package docs.