How to style NativeScript's slider

#1

Hello guys,

How can I style NativeScript’s slider component?

https://docs.nativescript.org/angular/code-samples/ui/slider

HTML’s slider is very easy to style… but I’m not sure about this XML one.
For instance, how can I change it’s slider thumb?
and how can I change color of path of slider?
I want to style it using CSS… please help.

Thanks,

#2

@designer24
Here you go
I have demonstrated both ways for you. You can set the color directly from HTML (XML for {N} Core)
or you can set it from CSS

Link -> https://play.nativescript.org/?template=play-ng&id=NM5iBo

#3

Thanks for your response! yes, I checked it on preview app.
However, it doesn’t allow me to change shape of slider’s thumb.
Now it’s a circle but I want a rectangle slider thumb with bigger size.
How can I make that change on NativeScript UI?

and how can I control width of slider’s path?

Thanks

#4

Not sure how to change the shape of it.
Maybe worth writing a plugin for it which uses something like this from the arsenal

and this for iOS

There might be better ones available. Will require some research

#5

Thanks, so can I use any slider on android arsenal?
if so, how can I implement it on nativescript?

#6

It would be a good idea to write a {N} plugin for it

#7

:scream::scream::scream::scream:

#8

@designer24,
I am also looking for the same thing. I need rectangle slider thumb.

I came across this plugin:

But even after installing the plugin, I could not use it. (I am new to nativescript.)

#9

This is a problem of NativeScript. It ships with only the basic components & minimum CSS3 styles.
Telerik guys should work on creating more flexible UI components and more CSS3 styles.
Otherwise all NativeScript apps will look really basic & minimal…

Check React Native. It ships with a variety of sliders which you can style with CSS3:

I’m Angular 5 developer and I realized React Native is surprisingly similar… and it’s not that difficult to learn so I will be working on React Native until Telerik guys implements all CSS3 properties and more usable UI components to NativeScript.

#10

Native UI components doesn’t support all the CSS stuffs like HTML.

If you check the code of react native’s slider plugin or even the SwiftlySlider are not the actual UISlider comes built-in with iOS. They both wrap set of views (UIView may be) and little animations to give a Slider like look and functionality.

It’s 100% possible to build a copy of react-native-slider in NativeScript, using similar logics. The question is who likes to write it? Could be possibly anyone who understands the framework, who actually needs it moreover who is not lazy :joy:

May be react native is around for a long time and has larger amount of plugins available. But I personally love NativeScript for it’s architecture, I don’t even have to write a plugin neither wait for one when I find something like SwiftlySlider / IndicatorSeekBar. I can directly import them into any NativeScript project and start using, it just requires little understanding about framework.

#12

Please note: The slider in the plugin nativescript-na-slider is not the seekbar. Its an image slider.
I did not realize this when I posted it earlier. This plugin is completely irrelevant to this topic here.