Skip to content

Slider — PAM Native UI

PAM Native UI · Android evidence

p-slider rendered by the production retained-native pipeline. The specimen below is a real Physical Samsung SM-G973F Android 12 (API 31) capture at 420 dpi, not an HTML recreation.

Physical Samsung layout, route and native interaction verified
Family
Selection controls
Module
slider
PHP facade
PSlider
Native targets
Android · UIKit

Selection controls component rendered through the retained-native Android and UIKit pipeline.

Android specimen

p-slider running in the PAM Native UI Android catalog

Interaction recording

The touch trace was captured from the Android application while exercising the native component.

p-slider native Android interaction

Showcase profiles

Every profile below is rendered by the Android catalog route shown above.

  • Default
  • Comfortable
  • Compact
  • Minimum
  • Maximum
  • Disabled
  • Step 10
  • Ticks
  • Tick Labels
  • Thumb Label
  • Always Thumb Label
  • Vertical
  • Reverse
  • Read Only
  • Primary
  • Success
  • Warning
  • Error

PHP usage

use Pam\MobileUi\Material\PSlider;
use Pam\Native\UI\Text;

PSlider::make(
    [
        'accessibilityLabel' => "PSlider preview",
        'color' => "primary",
        'density' => "comfortable",
    ],
    Text::make('Slider'),
);

The equivalent PAM template entry point is <p-slider>…</p-slider>.

See the PAM Native UI guide for event, state and styling conventions, and the quality contractfor native behavior requirements.

Component properties

PropertyObserved typeShowcase values
accessibilityLabelstring"PSlider preview"
colorstring"primary", "success", "warning", "error"
densitystring"comfortable", "compact"
disabledbooltrue
helperstring"Drag to adjust the value"
labelstring"PSlider"
maxint100
minint0
modelValueint64, 0, 100, 60
orientationint2
readonlybooltrue
reversebooltrue
stepint10, 25
thumbLabelbool | stringtrue, "always"
tickLabelsarrayStructured value
ticksbool | stringtrue, "always"
trackColorstring"secondary"
verticalbooltrue