Slider | Neural Native

Import

component.ts

import { NeuSliderComponent } from '@neural-ui/native/slider';

Examples

Import ExampleComponent into its parent and place <app-example /> inside your application’s root neu-theme. The preview supplies the device frame and safe areas; use the root setup from Installation in your app.

Find your focus

Adjust the volume on the slider in a composed focus-session screen. Toggle its optional adjustment buttons, mute at zero and start or pause the visual preview. No audio is played.

View and copy the complete example

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuIconButtonComponent } from '@neural-ui/native/icon-button';
import { NeuSwitchComponent } from '@neural-ui/native/switch';
import { NeuCardComponent } from '@neural-ui/native/card';
import { NeuBadgeComponent } from '@neural-ui/native/badge';
import { NeuSliderComponent } from '@neural-ui/native/slider';
import { NeuCardHeaderDirective } from '@neural-ui/native/card';
import { View, Text, Image, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuIconButtonComponent, NeuSwitchComponent, NeuCardComponent, NeuBadgeComponent, NeuSliderComponent, NeuCardHeaderDirective, View, Text, Image, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="false"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Find your focus</text><text class="product-caption">A little space for your next idea</text></view>
    <neu-card variant="surface"><view neuCardHeader class="session-heading"><image class="session-cover" [source]="{ uri: cover }" resizeMode="cover" accessibilityLabel="Original moonlit landscape in indigo and blue" /><view class="product-row"><view class="product-copy"><text class="studio-kicker">NEURAL SESSIONS / 01</text><text class="session-title" accessibilityRole="header">After hours</text><text class="product-caption">Ambient · Deep focus</text></view><neu-icon-button [label]="previewing() ? 'Pause preview' : 'Start preview'" [svg]="previewing() ? pauseIcon : playIcon" size="md" variant="solid" (pressed)="previewing.set(!previewing())" /></view></view>
    <view class="session-controls"><neu-slider label="Playback volume" [(value)]="volume" [min]="0" [max]="100" [step]="5" [showButtons]="buttons()" /><view class="product-row"><neu-badge [label]="volume() === 0 ? 'Muted' : previewing() ? 'Preview active' : 'Preview paused'" [tone]="volume() === 0 ? 'neutral' : 'info'" /></view></view></neu-card>
    <view class="session-preference"><neu-switch label="Show adjustment buttons" [(checked)]="buttons" /></view><text class="product-caption">Visual demonstration only; no audio is played.</text></view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }
.session-heading { gap: 18px; }
.session-cover { width: 100%; aspect-ratio: 1.5; border-radius: 12px; }
.studio-kicker { color: var(--neu-muted, #596477); font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: 1px; }
.session-title { color: var(--neu-text, #172033); font-size: 25px; line-height: 32px; font-weight: 600; }
.session-controls { gap: 12px; padding-top: 8px; }
.session-preference { padding-left: 4px; padding-right: 4px; }
  `,
})
export class ExampleComponent {
  readonly cover = '/assets/media/v2/night.png';
  readonly volume = signal(50);
  readonly buttons = signal(false);
  readonly previewing = signal(false);
  readonly playIcon = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="m8 5 11 7-11 7Z"/></svg>';
  readonly pauseIcon = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 5h4v14H6zM14 5h4v14h-4z"/></svg>';
}

Stepped adjustment

Adjust text scale in steps of ten and compare a read-only limit.

View and copy the complete example

stepped-adjustment.component.ts

import { Component, signal } from '@angular/core';
import { NeuSliderComponent } from '@neural-ui/native/slider';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuSliderComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-slider label="Text scale" [(value)]="textScale" [min]="100" [max]="150" [step]="10" /><text class="usage-caption">Text scale: {{ textScale() }}%</text>
    <neu-slider label="Organization volume limit" [value]="60" [readonly]="true" />
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {
  readonly volume = signal(50);
  readonly textScale = signal(100);
}

Without buttons

Tap or drag the track to adjust the volume without visible step buttons.

View and copy the complete example

without-buttons.component.ts

import { Component, signal } from '@angular/core';
import { NeuSliderComponent } from '@neural-ui/native/slider';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuSliderComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-slider label="Playback volume" [(value)]="volume" [showButtons]="false" [min]="0" [max]="100" [step]="5" /><text class="usage-caption">Volume: {{ volume() }}%</text>
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {
  readonly volume = signal(50);
}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

Slider · android · native capture — **Android**Native screenshot

Slider · ios · native capture — **iOS**Native screenshot

API reference

Inputs

Name	Type	Default	Binding	Description
label	string	Required	Input	Human-readable name for the control, action or group.
min	number	0	Input	Lower bound of the numeric range.
max	number	100	Input	Upper bound of the range or item limit, according to this control.
step	number	1	Input	Increment applied to numeric changes. Keep it positive and compatible with the range.
showButtons	boolean	true	Input	Show the decrease and increase buttons. Set false for track-only touch adjustment; accessible increment and decrement actions remain available.
disabled	boolean	false	Input	Disables user interaction. Values can still be supplied by the application.
readonly	boolean	false	Input	Prevents user editing or selection while retaining the current value.
increaseLabel	string	'Increase'	Input	Text or accessible name used for increase. It does not perform the action by itself.
decreaseLabel	string	'Decrease'	Input	Text or accessible name used for decrease. It does not perform the action by itself.

Models

Name	Type	Default	Binding	Description
value	number	0	Model · two-way	Current edited value or selected ID(s), using the declared type. Bind a writable signal with [(value)].

Outputs

Name	Payload	When it emits
valueChange	number	Emits the updated value value. [(value)] binds this output together with its model input.
touch	void	Reports user interaction to the surrounding form or application.

Model state

Bind the signal with [(modelName)] without calling it. Use modelName() to read its value.

model-fields.ts

import { signal } from '@angular/core';

// Fields inside your component class
readonly value = signal<number>(0);