Custom Slider component in nativescript

[Swapnil]

I need a slider ui component which can be customised, I want to change slider UI.

So my question is that, Is it possible to change slider UI in nativescript? If Yes, then How?

[Nick Iliev]

Hello Swapnil Mane,

The slider in NativeScript can be customized with two properties:
 - color: this will change the color of the threshold ball
 - backgroundColor: this will be applied to the color of the "achieved" value (common case to the left of the threshold)

Those two properties can be applied to the core element and will have an effect on both Android and iOS.
However, if you need to go further and use whatever the native APIs can provide that you can do it by accessing the native elements that lie behind Slider.
Those are UISlider for iOS and SeekBar for Android

Let say at you want to have your iOS application use customized slider.
Here is how to get access to the native component.

if (application.ios) {
    var sl = <Slider>page.getViewById("sl");
    sl.ios.minimumTrackTintColor = new UIColor({red: 55, green: 55, blue: 55, alpha:100}); // this is equal to backgroudColor
    sl.ios.maximumTrackTintColor = new UIColor({red: 155, green: 22, blue: 77, alpha:100}); // this is non exposed property which will change the color of the line to theright of the threshold ball
    sl.ios.thumbTintColor = new UIColor({red: 5, green: 100, blue: 200, alpha:100}); // this is equal to color
}

Regards,
Nikolay Iliev
Telerik by Progress

[Swapnil]

Hi Nikolay,

Thanks for the reply, actually I am working on slider component and wants to give it a different look.
Probably got success to make it as per the requirements(by showing images above the slider UI layer).

Slider thumb is working properly. It is possible to move slider thumb from above layer of images.

I got stuck at the point where I wants to get the current X and Y position of the slider thumb.

Please help me, Thanks in advance.

 

[Nick Iliev]

Hi Swapnil Mane,

I will need some more information about the custom slider you are working on. for example, are you creating
you custom component for both iOS and Android and are you using the NativeScript module Slider or rewriting the native implementations of the respective components in the native APIs (UISlider for iOS and SeekBar for Android).

The best approach (if applicable) will be if you can share a code snippet of what you have achieved so far - an archived project sends here (remove node_modules and platforms folder to minimize the size of the package) or a sample GitHub repository will do

With the information I have so far I can only speculate ,still I can give possible solutions.
If you are using our Slider component (or any other NativeScript view) then you can call gertLocationInWindow or getLocationOnScreen methods. Or even getLocationRelativeTo if this method is applicable for your case.

Al three methods mentioned above are returning  Point with X and Y properties.

Example usage:

var slider = page.getViewById("slider");

setTimeout(function() {
    console.log(slider.getLocationInWindow());
    console.log(slider.getLocationOnScreen());
}, 200);

Notice that I have wrapped the call in setTimeout in order to be sure that all component are fully loaded in the page.(as the call is made in the loaded event in the page).

Regards,
Nikolay Iliev
Telerik by Progress