Selection and input

Slider

A value along a range, picked by dragging.

iOSSwiftUI SliderAndroidCompose SliderRenders in a Screen or an Island

iOSSwiftUI Slider

AndroidCompose Slider

Import

import {Slider} from '@hzblj/kara-ui'

tsx

<Slider max={10} min={0} onValueChange={setRating} step={1} value={rating} />

SwiftUI Slider / Compose's Material Slider, tinted fill.accent.primary.

Prop	Type	Default	Description
value*	number	—	Between `min` and `max`. Controlled: pass back what `onValueChange` reports.
disabled	boolean	false	Stops the user moving the thumb, and dims the slider.
max	number	1	The upper end. `1` by default.
min	number	0	The lower end. `0` by default.
onValueChange	(value: number) => void	—	Called with the new value as the thumb moves.
step	number	—	The increment between stops; leave it unset for a continuous slider. On Android every stop plays a `tick`.

value*

number

Between min and max. Controlled: pass back what onValueChange reports.

disabledfalse

boolean

Stops the user moving the thumb, and dims the slider.

max1

number

The upper end. 1 by default.

min0

number

The lower end. 0 by default.

onValueChange

(value: number) => void

Called with the new value as the thumb moves.

step

number

The increment between stops; leave it unset for a continuous slider. On Android every stop plays a tick.