NativeScript · NathanWalker · Jan 6, 2026 · Dec 21, 2025 · Dec 23, 2025 · Dec 26, 2025
diff --git a/apps/automated/src/ui/slider/slider-tests.ts b/apps/automated/src/ui/slider/slider-tests.ts
@@ -6,6 +6,8 @@ import { BindingOptions, View, Page, Observable, EventData, PropertyChangeData,
 import { Slider } from '@nativescript/core/ui/slider';
 // << article-require-slider
 
+import { LinearGradient } from '@nativescript/core/ui/styling/linear-gradient';
+
 // ### Binding the Progress and Slider value properties to a observable view-model property.
 
 // >> article-binding-slider-properties
@@ -121,6 +123,67 @@ export function test_set_backgroundColor() {
 	}
 }
 
+export function test_set_linear_gradient_background() {
+	const slider = new Slider();
+
+	// Create a linear gradient programmatically
+	const gradient = new LinearGradient();
+	gradient.angle = Math.PI / 2; // 90 degrees (left to right)
+	gradient.colorStops = [{ color: new Color('red') }, { color: new Color('green') }, { color: new Color('blue') }];
+
+	function testAction(views: Array<View>) {
+		// Set the gradient via the style's backgroundImage
+		slider.style.backgroundImage = gradient;
+
+		// Verify the slider was created and the gradient was applied
+		TKUnit.assertNotNull(slider, 'slider should not be null');
+
+		if (__APPLE__) {
+			// On iOS, verify that track images were set
+			const minTrackImage = slider.ios.minimumTrackImageForState(UIControlState.Normal);
+			const maxTrackImage = slider.ios.maximumTrackImageForState(UIControlState.Normal);
+			TKUnit.assertNotNull(minTrackImage, 'minimumTrackImage should be set after applying gradient');
+			TKUnit.assertNotNull(maxTrackImage, 'maximumTrackImage should be set after applying gradient');
+		} else if (__ANDROID__) {
+			// On Android, verify the progress drawable was modified
+			const progressDrawable = slider.android.getProgressDrawable();
+			TKUnit.assertNotNull(progressDrawable, 'progressDrawable should not be null');
+		}
+	}
+
+	helper.buildUIAndRunTest(slider, testAction);
+}
+
+export function test_set_linear_gradient_with_stops() {
+	const slider = new Slider();
+
+	// Create a linear gradient with explicit color stops
+	const gradient = new LinearGradient();
+	gradient.angle = 0; // 0 degrees (bottom to top)
+	gradient.colorStops = [
+		{ color: new Color('orangered'), offset: { unit: '%', value: 0 } },
+		{ color: new Color('green'), offset: { unit: '%', value: 0.5 } },
+		{ color: new Color('lightblue'), offset: { unit: '%', value: 1 } },
+	];
+
+	function testAction(views: Array<View>) {
+		slider.style.backgroundImage = gradient;
+
+		// Verify the slider was created
+		TKUnit.assertNotNull(slider, 'slider should not be null');
+
+		if (__APPLE__) {
+			const minTrackImage = slider.ios.minimumTrackImageForState(UIControlState.Normal);
+			TKUnit.assertNotNull(minTrackImage, 'minimumTrackImage should be set after applying gradient with stops');
+		} else if (__ANDROID__) {
+			const progressDrawable = slider.android.getProgressDrawable();
+			TKUnit.assertNotNull(progressDrawable, 'progressDrawable should not be null');
+		}
+	}
+
+	helper.buildUIAndRunTest(slider, testAction);
+}
+
 export function test_default_TNS_values() {
 	const slider = new Slider();
 	TKUnit.assertEqual(slider.value, 0, 'Default slider.value');

diff --git a/apps/toolbox/nativescript.config.ts b/apps/toolbox/nativescript.config.ts
@@ -12,6 +12,6 @@ export default {
 		packageManager: 'npm',
 		additionalPathsToClean: ['.ns-vite-build'],
 	},
-	bundler: 'vite',
-	bundlerConfigPath: 'vite.config.ts',
+	// bundler: 'vite',
+	// bundlerConfigPath: 'vite.config.ts',
 } as NativeScriptConfig;
diff --git a/apps/toolbox/src/app.css b/apps/toolbox/src/app.css
@@ -339,3 +339,32 @@ Button {
 .text-center {
     text-align: center;
 }
+
+/* Sliders Demo Page Styles */
+.sliders-demo-page Slider.gradient-slider {
+    background: linear-gradient(to right, orangered, green, lightblue);
+}
+
+.sliders-demo-page Slider.rainbow-slider {
+    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+}
+
+.sliders-demo-page Slider.two-color-slider {
+    background: linear-gradient(to right, #ff6b6b, #4ecdc4);
+}
+
+.sliders-demo-page Slider.sunset-slider {
+    background: linear-gradient(to right, #f12711, #f5af19);
+}
+
+.sliders-demo-page Slider.ocean-slider {
+    background: linear-gradient(to right, #2193b0, #6dd5ed);
+}
+
+.sliders-demo-page Slider.purple-slider {
+    background: linear-gradient(to right, #8e2de2, #4a00e0);
+}
+
+.sliders-demo-page Slider.stops-slider {
+    background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
+}
diff --git a/apps/toolbox/src/main-page.xml b/apps/toolbox/src/main-page.xml
@@ -22,6 +22,7 @@
         <Button text="multiple-scenes" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="root-layout" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="scroll-view" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
+        <Button text="sliders" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="status-bar" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="switch" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="tabview" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />

diff --git a/apps/toolbox/src/pages/sliders.ts b/apps/toolbox/src/pages/sliders.ts
@@ -0,0 +1,14 @@
+import { Observable, EventData, Page } from '@nativescript/core';
+
+let page: Page;
+
+export function navigatingTo(args: EventData) {
+	page = <Page>args.object;
+	page.bindingContext = new SlidersModel();
+}
+
+export class SlidersModel extends Observable {
+	constructor() {
+		super();
+	}
+}
diff --git a/apps/toolbox/src/pages/sliders.xml b/apps/toolbox/src/pages/sliders.xml
@@ -0,0 +1,48 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+    <Page.actionBar>
+        <ActionBar title="Sliders" icon="" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+
+    <GridLayout class="sliders-demo-page">
+      <ScrollView>
+          <StackLayout padding="20" visionos:padding="40">
+
+            <Label text="Default Slider" class="h3" marginTop="24" />
+            <Slider minValue="0" maxValue="100" value="50" marginTop="12" />
+
+            <Label text="Gradient Slider (CSS)" class="h3" marginTop="24" />
+            <Label text="background: linear-gradient(to right, orangered, green, lightblue)" class="caption" />
+            <Slider class="gradient-slider" minValue="0" maxValue="100" value="50" marginTop="12" />
+
+            <Label text="Rainbow Gradient" class="h3" marginTop="24" />
+            <Label text="background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)" class="caption" />
+            <Slider class="rainbow-slider" minValue="0" maxValue="100" value="70" marginTop="12" />
+
+            <Label text="Two-Color Gradient" class="h3" marginTop="24" />
+            <Label text="background: linear-gradient(to right, #ff6b6b, #4ecdc4)" class="caption" />
+            <Slider class="two-color-slider" minValue="0" maxValue="100" value="30" marginTop="12" />
+
+            <Label text="Sunset Gradient" class="h3" marginTop="24" />
+            <Label text="background: linear-gradient(to right, #f12711, #f5af19)" class="caption" />
+            <Slider class="sunset-slider" minValue="0" maxValue="100" value="60" marginTop="12" />
+
+            <Label text="Ocean Gradient" class="h3" marginTop="24" />
+            <Label text="background: linear-gradient(to right, #2193b0, #6dd5ed)" class="caption" />
+            <Slider class="ocean-slider" minValue="0" maxValue="100" value="40" marginTop="12" />
+
+            <Label text="Purple Gradient" class="h3" marginTop="24" />
+            <Label text="background: linear-gradient(to right, #8e2de2, #4a00e0)" class="caption" />
+            <Slider class="purple-slider" minValue="0" maxValue="100" value="80" marginTop="12" />
+
+            <Label text="Gradient with Color Stops" class="h3" marginTop="24" />
+            <Label text="background: linear-gradient(to right, red 0%, yellow 50%, green 100%)" class="caption" />
+            <Slider class="stops-slider" minValue="0" maxValue="100" value="50" marginTop="12" />
+
+            <Label text="Disabled Gradient Slider" class="h3" marginTop="24" />
+            <Slider class="gradient-slider" minValue="0" maxValue="100" value="50" isEnabled="false" marginTop="12" />
+
+          </StackLayout>
+      </ScrollView>
+    </GridLayout>
+</Page>