feat(slider): add linear-gradient support for track background #11015

omairqazi29 · 2025-12-21T23:56:16Z

Summary

Enable using CSS linear-gradient for the Slider component's track background
Implements feature request from [Feature] Slider linear-gradient support #5940

Android Implementation

Creates android.graphics.LinearGradient shader from CSS gradient color stops
Applies gradient to ShapeDrawable wrapped in ClipDrawable for progress clipping
Sets both progress layer and background layer (at 30% opacity) of the SeekBar

iOS Implementation

Creates CAGradientLayer with colors and positions from CSS gradient
Renders gradient layer to UIImage
Creates stretchable track images using resizableImageWithCapInsetsResizingMode
Sets minimum track image (full opacity) and maximum track image (30% opacity)

Usage

Via CSS

.gradient-slider {
    background: linear-gradient(to right, orangered, green, lightblue);
}

<Slider class="gradient-slider" minValue="0" maxValue="100" value="50" />

Programmatically

import { LinearGradient } from '@nativescript/core/ui/styling/linear-gradient';
import { Color } from '@nativescript/core';

const gradient = new LinearGradient();
gradient.angle = Math.PI / 2; // left to right
gradient.colorStops = [
    { color: new Color('orangered') },
    { color: new Color('green') },
    { color: new Color('lightblue') },
];

slider.style.backgroundImage = gradient;

Test plan

Added unit tests for linear gradient backgrounds
Added unit tests for linear gradients with explicit color stops
Manual testing on Android device/emulator
Manual testing on iOS device/simulator

Closes #5940

Enable using CSS linear-gradient for the Slider component's track. This allows setting gradient backgrounds via the background-image CSS property or programmatically. On Android: - Creates LinearGradient shader applied to ShapeDrawable - Sets gradient on both progress and background layers of SeekBar On iOS: - Creates CAGradientLayer and renders to UIImage - Sets resizable track images for min/max track states Closes NativeScript#5940

nx-cloud · 2025-12-22T03:03:50Z

View your CI Pipeline Execution ↗ for commit 8805f91

Command	Status	Duration	Result
`nx test apps-automated -c=android`	✅ Succeeded	4m 28s	View ↗
`nx run-many --target=test --configuration=ci --...`	✅ Succeeded	3s	View ↗

☁️ Nx Cloud last updated this comment at 2025-12-28 17:12:43 UTC

nx-cloud · 2025-12-22T03:03:50Z

View your CI Pipeline Execution ↗ for commit c3326e5

Command	Status	Duration	Result
`nx run-many --target=test --configuration=ci --...`	✅ Succeeded	1s	View ↗

☁️ Nx Cloud last updated this comment at 2025-12-22 03:03:49 UTC

apps/automated/src/ui/slider/slider-tests.ts

Add sample page to toolbox demonstrating gradient slider backgrounds: - Default slider for comparison - Various gradient styles (rainbow, sunset, ocean, purple) - Gradient with explicit color stops - Disabled gradient slider example

NathanWalker · 2025-12-26T23:35:54Z

Nice work @omairqazi29 I pushed up one adjustment to use newer/preferred iOS 10+ (non-deprecated) graphics APIs since NativeScript is right now a iOS 12/13 min target 👍
omairqazi29@430fd8d

NathanWalker · 2025-12-26T23:43:09Z

packages/core/ui/slider/index.android.ts

-		//
+		if (value && value.image instanceof LinearGradient) {
+			this._applyGradientToTrack(value.image);
+		}


Actually unfortunately @omairqazi29 it does not work on Android if able to check this.

@NathanWalker Fixed using ShapeDrawable with LinearGradient shader as shown in #5940 example.

And on iOS:

omairqazi29 · 2025-12-27T00:13:45Z

Nice work @omairqazi29 I pushed up one adjustment to use newer/preferred iOS 10+ (non-deprecated) graphics APIs since NativeScript is right now a iOS 12/13 min target 👍 omairqazi29@430fd8d

Awesome noted.

…arGradient

…ipping

…ativeScript#11020) [skip ci] Bumps [step-security/harden-runner](https://github.com/step-security/harden-runner) from 2.13.1 to 2.14.0. - [Release notes](https://github.com/step-security/harden-runner/releases) - [Commits](step-security/harden-runner@f4a75cf...20cf305) --- updated-dependencies: - dependency-name: step-security/harden-runner dependency-version: 2.14.0 dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

…ipt#11021) [skip ci] Bumps [actions/setup-python](https://github.com/actions/setup-python) from 5.6.0 to 6.1.0. - [Release notes](https://github.com/actions/setup-python/releases) - [Commits](actions/setup-python@a26af69...83679a8) --- updated-dependencies: - dependency-name: actions/setup-python dependency-version: 6.1.0 dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

…Script#11022) [skip ci] Bumps [actions/upload-artifact](https://github.com/actions/upload-artifact) from 5.0.0 to 6.0.0. - [Release notes](https://github.com/actions/upload-artifact/releases) - [Commits](actions/upload-artifact@330a01c...b7c566a) --- updated-dependencies: - dependency-name: actions/upload-artifact dependency-version: 6.0.0 dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

…cript#11023) [skip ci] Bumps [github/codeql-action](https://github.com/github/codeql-action) from 4.31.5 to 4.31.9. - [Release notes](https://github.com/github/codeql-action/releases) - [Changelog](https://github.com/github/codeql-action/blob/main/CHANGELOG.md) - [Commits](github/codeql-action@fdbfb4d...5d4e8d1) --- updated-dependencies: - dependency-name: github/codeql-action dependency-version: 4.31.9 dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

…t#11024) [skip ci] Bumps [actions/setup-java](https://github.com/actions/setup-java) from 5.0.0 to 5.1.0. - [Release notes](https://github.com/actions/setup-java/releases) - [Commits](actions/setup-java@dded088...f2beeb2) --- updated-dependencies: - dependency-name: actions/setup-java dependency-version: 5.1.0 dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

[skip ci]

- project: devtools 0.0.2-next.1 - project: webpack5 5.0.31-next.1 - project: core 9.0.11-next.2 - project: vite 1.0.4-next.1

- project: devtools 0.0.2-next.2 - project: webpack5 5.0.31-next.2 - project: core 9.0.12-next.0 - project: vite 1.0.4-next.2

- project: devtools 0.0.2-next.4 - project: webpack5 5.0.30-next.1 - project: core 9.0.12-next.2 - project: vite 1.0.6-next.1

- project: webpack5 5.0.31-next.0

- project: webpack5 5.0.31-next.1 - project: vite 1.0.6-next.2

- project: webpack5 5.0.32-next.0

NathanWalker · 2026-01-06T04:47:46Z

Pushed up one last improvement to android but wanted you to see where it all landed:
1603027

NathanWalker · 2026-01-06T04:48:09Z

Thanks again for all your work here @omairqazi29!

omairqazi29 mentioned this pull request Dec 21, 2025

[Feature] Slider linear-gradient support #5940

Closed

NathanWalker reviewed Dec 22, 2025

View reviewed changes

apps/automated/src/ui/slider/slider-tests.ts Show resolved Hide resolved

NathanWalker approved these changes Dec 26, 2025

View reviewed changes

chore: use preferred newer memory optimized UIGraphicsImageRenderer api

430fd8d

NathanWalker requested changes Dec 26, 2025

View reviewed changes

omairqazi29 added 2 commits December 26, 2025 19:52

fix(android): implement gradient slider using ShapeDrawable with Line…

181995e

…arGradient

fix(android/slider): use ClipDrawable for proper gradient progress cl…

8805f91

…ipping

omairqazi29 requested a review from NathanWalker December 27, 2025 01:04

NathanWalker force-pushed the main branch from ed43a4e to 661d607 Compare December 27, 2025 17:42

Merge branch 'main' into feat/slider-linear-gradient-support

142f4c0

NathanWalker force-pushed the main branch from 26170f7 to 2c88a0b Compare January 4, 2026 22:36

dependabot bot and others added 13 commits January 5, 2026 19:29

feat(config): remote module security (NativeScript#11040)

dcb1f60

[skip ci]

chore: core readme

b817693

chore(release): publish

a38261a

- project: devtools 0.0.2-next.1 - project: webpack5 5.0.31-next.1 - project: core 9.0.11-next.2 - project: vite 1.0.4-next.1

release(core): 9.0.11

aca87f0

release(core): 9.0.11

e29e44f

chore(release): publish

621b2ae

- project: devtools 0.0.2-next.2 - project: webpack5 5.0.31-next.2 - project: core 9.0.12-next.0 - project: vite 1.0.4-next.2

fix(webpack): ts-patch transform (NativeScript#11041)

e871f16

ci: build

a6c0a76

github-actions bot and others added 9 commits January 5, 2026 19:29

chore(release): publish

9aac0d4

- project: devtools 0.0.2-next.4 - project: webpack5 5.0.30-next.1 - project: core 9.0.12-next.2 - project: vite 1.0.6-next.1

release(webpack): 5.0.30

25beb18

chore(release): publish

5b8f806

- project: webpack5 5.0.31-next.0

chore: workflow next affected

1752481

chore(release): publish

3b221de

- project: webpack5 5.0.31-next.1 - project: vite 1.0.6-next.2

release(webpack): 5.0.31

fce5ecf

chore(release): publish

4f03ea9

- project: webpack5 5.0.32-next.0

Merge branch 'main' into feat/slider-linear-gradient-support

a839d6e

feat: improve android

1603027

NathanWalker approved these changes Jan 6, 2026

View reviewed changes

NathanWalker merged commit 08f6d18 into NativeScript:main Jan 6, 2026
1 check passed

omairqazi29 deleted the feat/slider-linear-gradient-support branch January 7, 2026 02:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat(slider): add linear-gradient support for track background #11015

feat(slider): add linear-gradient support for track background #11015

Uh oh!

omairqazi29 commented Dec 21, 2025 •

edited

Loading

Uh oh!

nx-cloud bot commented Dec 22, 2025 •

edited

Loading

Uh oh!

nx-cloud bot commented Dec 22, 2025

Uh oh!

Uh oh!

NathanWalker commented Dec 26, 2025

Uh oh!

NathanWalker Dec 26, 2025

Uh oh!

omairqazi29 Dec 27, 2025

Uh oh!

omairqazi29 commented Dec 27, 2025

Uh oh!

NathanWalker commented Jan 6, 2026

Uh oh!

NathanWalker commented Jan 6, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

feat(slider): add linear-gradient support for track background #11015

feat(slider): add linear-gradient support for track background #11015

Uh oh!

Conversation

omairqazi29 commented Dec 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Android Implementation

iOS Implementation

Usage

Via CSS

Programmatically

Test plan

Uh oh!

nx-cloud bot commented Dec 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nx-cloud bot commented Dec 22, 2025

Uh oh!

Uh oh!

NathanWalker commented Dec 26, 2025

Uh oh!

NathanWalker Dec 26, 2025

Choose a reason for hiding this comment

Uh oh!

omairqazi29 Dec 27, 2025

Choose a reason for hiding this comment

Uh oh!

omairqazi29 commented Dec 27, 2025

Uh oh!

NathanWalker commented Jan 6, 2026

Uh oh!

NathanWalker commented Jan 6, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

omairqazi29 commented Dec 21, 2025 •

edited

Loading

nx-cloud bot commented Dec 22, 2025 •

edited

Loading